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

全部,

我希望能够在CSS中将calc（）与transform:translateX一起使用

例如：

#myDiv{
-webkit转换：translateX（计算（100%-50px））；
-moz变换：translateX（计算（100%-50px））；
转换：translateX（计算（100%-50px））；
}

虽然这在Chrome、Safari和Firefox中都能很好地工作，但在IE10或IE11中却不起作用

您可以在这里看到一个简单的示例：

这不可能吗？这是IE中的一个bug，还是

calc（）

不应该在这种情况下工作

值得一提的是，我读到您可以“堆叠”

translateX

以实现相同的效果，我的测试似乎证实了这一点。即

#div{
转换：translateX（计算（100%-50px））；
}

同：

#div{
转化：translateX（100%）translateX（-50px）；
}

但我不知道这是否是最好的、最可靠的、经得起未来考验的方法

我也知道可以使用

left

而不是

translateX

，但后者在用于过渡时更平滑，因为据我所知，它强制使用GPU来处理动画

提前感谢您的建议和见解

这是：

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

在分析时编译，但此处的计算表达式：

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

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

---

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

我只是将它们与-ms-browser选择器一起使用。它工作得很好

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

---

，及。只需使用两个

translateX

s，这是“我在这里读到的，你可以“堆叠”translateX”的最好方法-你救了我一天。对于YUI CSS压缩器没有正确处理嵌套calc（）表达式的问题，这是一个很好的解决方法。谢谢这是我在很长一段时间里学到的关于CSS的最有用的东西！哇，真奇怪！这对我来说真的很有效。谢谢。这很愚蠢，但这里给我的新信息是，可以在一个元素上多次使用相同类型的转换！谢谢2个translateX是同时执行还是一个接一个地执行？因为，如果一个接一个地转换属性，属性也会被复制，这会造成与calc（）用法不同的效果。（我实际上使用了类似于

calc（912px-50vw）

的方法来防止侧栏显示在仪表板顶部，除非您将其悬停。