无法在 IE 中将 CSS calc() 与 transform:translateX 一起使用

Question

全部，

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

例如，

#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() 不应该在这种情况下工作？

对于它的价值 - 我读到 here 你可以“堆叠” translateX 以达到相同的效果，我的测试似乎证实了这一点。即，

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

等同于：

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

但我不知道这是否是最好、最可靠和面向未来的方法。

我也知道可以使用left 代替translateX，但后者在与过渡一起使用时更加平滑，因为据我了解，它强制使用GPU 来处理动画。

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

Answer 1

我只是将它们都与 -ms- 浏览器选择器一起使用。效果很好。

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

Answer 2

这个：

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

在解析时编译，但在这里计算表达式：

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

必须在每次浏览器需要该值时进行解释。表达式的结果可以被缓存，但我不会依赖浏览器来使用这种优化。

所以第一个更好，因为 a) 现在可以工作，b) 有效，c) 在规范生效之前它将继续工作。