IE 10 + 11：与calc（）的CSS转换不起作用

我使用CSS转换从右到左移动鼠标hover的容器。 这在除IE浏览器以外的所有浏览器都能正常工作。 原因是我在我的CSS left属性中使用（并需要使用）calc（）。

我在这里创build了一个实时演示： 实时演示

CSS看起来像这样：

div { background: red; width: 100px; height: 100px; position: absolute; top: 100px; left: 90%; -webkit-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1); -moz-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1); -o-transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1); transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1); } div.translate-less { left: calc(90% - 4rem) } 

我正在添加class .translate-less鼠标hover与jQuery：

 $(document) .on( 'mouseenter', 'div', function(){ $(this).addClass('translate-less') }) .on( 'mouseleave', 'div', function(){ $('div').removeClass('translate-less'); }) 

现在我想在Internet Explorer中顺利过渡。 为此，我甚至会为这些特定的浏览器放弃calc（），并添加left: 85%;的规则left: 85%; 。 但IE 10和11已经放弃了对条件注释的支持，而且似乎没有办法专门针对这些浏览器。 IE 10可以用-ms-high-contrast-hack作为目标，但是IE 11不能。 我不想使用JavaScript来检测浏览器，因为这看起来甚至比使用CSS hack hackier。

任何帮助？ 提前致谢！

Answer 1

也许transform: translateX()可以提供一个解决方法。 根据具体情况，使用变换和正确的属性可能会更好：

 right: 10%; transform: translateX(-4rem); 

这里是你的脚本的修改版本： http : //jsfiddle.net/xV84Z/1/ 。

或者，虽然在IE中的translateX()中不能使用calc() （因为有bug ），但是您可以在变换中应用多个translateX() ：

 /* This */ transform: translateX(90%) translateX(-4rem); /* is equivalent to this */ transform: translateX(calc(90% - 4rem)); 

（然而，在这种情况下，90％意味着90％的目标，而不是父母。）