带有calc（）的CSS过渡在IE10 +中不起作用

Question

我正在用CSS过渡在鼠标悬停时从右到左设置一个容器动画。在InternetExplorer以外的所有浏览器中，此功能均正常运行。原因是我在CSSleft属性中使用了（并且需要使用）calc（）。

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

我正在使用jQuery在mouseover上添加.translate-less类：

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

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

Answer 1

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

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

另外，虽然你不能使用calc()中的translateX()在IE（因为错误），可将多个translateX()在变换S：

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

（但是，在这种情况下，90％表示目标的90％，而不是父级。）