Html 无法在 IE 中将 CSS calc() 与 transform:translateX 一起使用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21469350/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Not possible to use CSS calc() with transform:translateX in IE
提问by mattstuehler
All,
全部，
I would like to be able to use calc() with transform:translateX in my CSS.
我希望能够在我的 CSS 中使用 calc() 和 transform:translateX。
E.g.,
例如，
#myDiv {
-webkit-transform: translateX(calc(100% - 50px));
-moz-transform: translateX(calc(100% - 50px));
transform: translateX(calc(100% - 50px));
}
While this works perfectly in Chrome, Safari, and Firefox - it does not work in IE10 or IE11.
虽然这在 Chrome、Safari 和 Firefox 中完美运行 - 但在 IE10 或 IE11 中不起作用。
You can see a simple example here: http://jsfiddle.net/SL2mk/9/
你可以在这里看到一个简单的例子：http: //jsfiddle.net/SL2mk/9/
Is this impossible? Is it a bug in IE, or is calc()not supposed to work in this context?
这是不可能的吗？它是 IE 中的错误，还是calc()不应该在这种情况下工作？
For what it's worth - I read herethat you can "stack" translateXto acheive the same effect, and my testing seems to confirm this. I.e.,
对于它的价值 - 我在这里读到你可以“堆叠”translateX以达到相同的效果，我的测试似乎证实了这一点。IE，
#div {
transform: translateX(calc(100% - 50px));
}
is the same as:
是相同的：
#div {
transform: translateX(100%) translateX(-50px);
}
But I don't know if this is the best, most reliable, and future-proof way to do this.
但我不知道这是否是最好、最可靠和面向未来的方法。
I also know that it's possible to use leftinstead of translateX, but the latter is much smoother when used with transitions, since, as I understand it, it forces the use of the GPU to handle the animation.
我也知道可以使用left代替translateX，但后者在与过渡一起使用时要平滑得多，因为据我所知，它强制使用 GPU 来处理动画。
Thanks in advance for your advice and insight!
在此先感谢您的建议和见解！
回答by c-smile
This:
这个：
transform: translateX(100%) translateX(-50px);
gets compiled at parse time, but calc expression here :
在解析时编译，但这里的 calc 表达式：
transform: translateX(calc(100% - 50px));
has to be interpreted each time when browser needs that value. Result of the expression can be cached but I wouldn't rely on browsers to use such kind of optimizations.
每次浏览器需要该值时都必须进行解释。表达式的结果可以被缓存，但我不会依赖浏览器来使用这种优化。
So first one is better in the sense that a) it works now, b) is effective and c) it will work in future until the spec will be in effect.
所以第一个更好，因为 a) 现在有效，b) 有效，c) 将来会有效，直到规范生效。
回答by Daut
I just use them both with -ms- browser selector. It works perfectly.
我只是将它们与 -ms- 浏览器选择器一起使用。它完美地工作。
-ms-transform: translateX(100%) translateX(-50px); /* IE 11 */
transform: translateX(calc(100% - 50px));
