在 IE 中不可能使用 CSS calc()来转换: tranateX

所有人,

我希望能够在我的 CSS 中使用 calc ()和 transform.tranateX。

例如:

#myDiv {
-webkit-transform: translateX(calc(100% - 50px));
-moz-transform: translateX(calc(100% - 50px));
transform: translateX(calc(100% - 50px));
}

虽然这在 Chrome、 Safari 和 Firefox 中运行良好，但是在 IE10或 IE11中不起作用。

您可以在这里看到一个简单的示例: http://jsfiddle.net/SL2mk/9/

这是不可能的吗? 这是一个错误在 IE，或 calc()是不应该在这种情况下工作？

不管怎样，我读了给你，你可以“堆叠”translateX来达到同样的效果，我的测试似乎证实了这一点。也就是说,

#div {
transform: translateX(calc(100% - 50px));
}

等同于:

#div {
transform: translateX(100%) translateX(-50px);
}

但我不知道这是否是最好的，最可靠的，防止未来发生的方法。

我也知道使用 left代替 translateX是可能的，但是后者在使用过渡时要平滑得多，因为据我所知，它强制使用 GPU 来处理动画。

提前感谢您的建议和见解！

html
css

56805 次浏览

小开

最佳答案

This:

transform: translateX(100%) translateX(-50px);

gets compiled at parse time, but calc expression here :

transform: translateX(calc(100% - 50px));

has to be interpreted each time when browser needs that value. Result of the expression can be cached but I wouldn't rely on browsers to use such kind of optimizations.

So first one is better in the sense that a) it works now, b) is effective and c) it will work in future until the spec will be in effect.

小开

I just use them both with -ms- browser selector. It works perfectly.

-ms-transform: translateX(100%) translateX(-50px); /* IE 11 */
transform: translateX(calc(100% - 50px));