html - 无法将 CSS calc() 与转换一起使用 :translateX in IE

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() 不应该在此上下文中工作？

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

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

等同于:

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

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

我也知道可以使用 left 而不是 translateX，但后者在与转换一起使用时要平滑得多，因为据我所知，它强制使用 GPU 处理动画。

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

Answer 1

这个:

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

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

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

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

所以第一个更好，因为 a) 现在有效，b) 有效，c) 在规范生效之前它将在未来有效。