在 IE 中使用 calc() 转换宽度和高度

Question

我今天遇到了一个问题，即尝试使用 CSS 过渡来使用 calc() 更改对象的尺寸在 IE 中不起作用。或者，更确切地说，它们在应用计算值但忽略转换规则的意义上工作。

在此处查看示例：http://jsfiddle.net/32Qr7/

.block {
  width: 350px; height: 100px;
  background-color: red;
  margin: 10px; padding-left: 10px;
  transition: all 1s ease-in-out;
}

.block:hover {
  width: calc(100% - 50px);
  height: calc(150px + 10%);
}

在此示例中，存在一个 div，它在悬停时会在一秒钟内更改其宽度、高度和背景颜色。在 IE 中，背景颜色仍然是平滑的动画，但是宽度和高度的变化是瞬时的。

这对我来说是一个很大的问题，因为我有一个响应式 Web 应用程序，其抽屉从侧面滑出，并且布局的其余部分必须进行调整以进行补偿。由于我要处理多种屏幕尺寸，我不能使用硬编码值。

（是的，我查看了IE 10 + 11: CSS transitions with calc() do not work，希望在那里找到解决方案，但该问题不涉及尺寸变化，因此接受的解决方案对我不起作用。）

有没有人知道这个问题的解决方法，或者有任何其他替代策略可以建议？我希望能够在 CSS 中做到这一点，避免不得不回退到使用 jQuery 动画技术或类似的东西。

Answer 1

似乎我在玩了一会儿之后找到了解决方法（至少它适用于IE10 和IE11）。我使用max-width 属性代替calc() 方法。 CSS 悬停：

.notworks:hover {
    width: 100%;
    max-width: calc(100% - 50px);
    height: 175px;
}

Example