Question

今天我遇到一个问题，试图使用CSS转换来改变对象的尺寸，而calc（）在IE中不起作用。或者更确切地说，它们正在应用计算值，但转换规则被忽略。

.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，它改变了它的＆＃39;悬停时一秒钟内的宽度，高度和背景颜色。在IE中，背景色仍然可以平滑地动画，但宽度和高度的变化是瞬时的。

这对我来说是一个非常大的问题，因为我有一个响应式网络应用程序，抽屉从侧面滑出，其余的布局必须调整以补偿。由于我处理的是多种屏幕尺寸，因此我无法使用硬编码值。

（是的，我看了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

使用calc（）在IE中转换宽度和高度

1 个答案: