无法在IE中将CSS calc（）与transform：translateX一起使用

所有，

我希望能够在我的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()在这种情况下不起作用？

为了它的价值-我在这里读到，您可以“堆叠”translateX以达到相同的效果，而我的测试似乎证实了这一点。即

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

是相同的：

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

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

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

预先感谢您的建议和见解！

这个：

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

在解析时进行编译，但此处为calc表达式：

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

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

因此，从以下方面来说，第一个更好：a）现在可以正常工作，b）有效，并且c）将来可以正常工作直到规范生效。

我只是将它们与-ms-浏览器选择器一起使用。完美运作。

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