html – 不可能在IE中使用带有transform：translateX的CSS calc()

概述所有, 我希望能够在我的CSS中使用calc()和transform：translateX. 例如., #myDiv { -webkit-transform: translateX(calc(100% - 50px)); -moz-transform: translateX(calc(100% - 50px)); transform: translateX(calc(100% - 50 所有,

我希望能够在我的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来处理动画.

提前感谢您的建议和见解！

解决方法 这个：

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

在解析时编译,但在这里计算表达式：

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

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

因此,第一个是更好的,因为a)它现在有效,b)有效,c)它将在未来生效,直到规范生效.

总结

以上是内存溢出为你收集整理的html – 不可能在IE中使用带有transform：translateX的CSS calc()全部内容，希望文章能够帮你解决html – 不可能在IE中使用带有transform：translateX的CSS calc()所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。