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

这：

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

在解析时编译，但在此处使用calc表达式：

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

每次浏览器需要该值时都必须解释

。表达式的结果可以缓存，但我不会依赖浏览器来使用这种优化。

所以第一个是更好的，因为a）它现在有效，b）有效，c）它将在未来生效，直到规范生效。

Answer 2

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

modelAndView.addObject()

不可能在IE中使用带有transform：translateX的CSS calc（）

2 个答案: