IE 10 + 11：使用calc（）进行CSS转换不起作用

我使用CSS转换从右到左的鼠标悬停动画容器。这适用于除Internet Explorer以外的所有浏览器。原因是我在我的CSS left属性中使用（并需要使用）calc（）。IE 10 + 11：使用calc（）进行CSS转换不起作用

我创建了一个现场演示在这里：Live Demo

的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) 
}

我加入类.translate少鼠标悬停使用jQuery：

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

现在我想在Internet Explorer中顺利过渡。为此，我甚至会抛弃这些特定浏览器的calc（）并添加一条规则，如left: 85%;。但IE 10和11有dropped support for conditional comments，似乎没有办法专门针对这些浏览器。 IE 10可以用-ms-high-contrast-hack作为目标，但IE 11不能。我不想use JavaScript检测浏览器，因为这看起来甚至比使用CSS hack hackier。

任何帮助？提前致谢！

来源

2014-01-15 bootsmaat

刚刚使用左边的问题是：85％，因为它可以与所有浏览器一起使用？另外，为什么不使用.translate-less：悬停，而不是在鼠标悬停上添加一个类。 – Charles380

Charles380，左侧85％，左侧90％-4rem有显着差异。前者的滑动距离是相对的（在宽视口上较大，在狭窄的视口上较小），而后者是绝对的。这恰好是我设计中的一个重要区别。（感谢：悬停提示，但我需要在这里使用jQuery的其他原因。基本上，我修改更多的元素，而不仅仅是这个，不能以这些：hover。） – bootsmaat

也许transform: translateX()可以提供解决方法。根据具体情况，使用转换，右边的属性可能会更好：

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

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

或者，而不能在IE中的translateX()内使用calc()（因为a bug），则可以在变换应用多个translateX() S：

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

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

来源

2014-01-27 12:46:34

哇...这是一个很好的答案！我有一个相关的问题 - 我想用'translateX'使用calc（），但它在Chrome，Safari和Firefox中工作 - 它不适用于IE。因此，在单个转换中使用** multiple **'translateX'的解决方案非常方便！出于好奇 - 你知道**为什么**它不适用于IE？这不是规范的一部分，还是只是一个错误？ – mattstuehler

@mattstuehler [这是一个错误]（http://connect.microsoft.com/IE/feedback/details/762719/css3-calc-bug-inside-transition-or-transform） –

感谢您的回答！这为我节省了一大笔努力。 – LandonSchropp

IE 10 + 11：使用calc（）进行CSS转换不起作用

回答

相关问题