我希望能够在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中的bug，还是calc()不应该在这种上下文中工作？
值得一提的是--我读到here，你可以"堆叠" translateX来获得同样的效果，我的测试似乎证实了这一点。
#div {
transform: translateX(calc(100% - 50px));
}等同于：
#div {
transform: translateX(100%) translateX(-50px);
}但我不知道这是否是最好、最可靠、最经得起未来考验的方法。
我还知道可以使用left代替translateX，但后者在使用过渡时要平滑得多，因为据我所知，它强制使用GPU来处理动画。
2条答案
按热度按时间axzmvihb1#
这一点：
在解析时编译，但此处的calc表达式：
每次浏览器需要这个值的时候都必须被解释。表达式的结果可以被缓存，但是我不会依赖浏览器来使用这种优化。
因此，第一个更好的意义上说，a）它现在工作，b）是有效的，c）它将在未来的工作，直到规范将生效。
eiee3dmh2#
我只是把它们都和-ms- browser选择器一起使用。它工作得很完美。