带有 calc() 的 CSS 转换在 IE10+ 中不起作用

Question

我在鼠标悬停时使用 CSS 过渡动画从右到左的容器。这适用于除 Internet Explorer 之外的所有浏览器。原因是我在我的 CSS 左属性中使用(并且需要使用)calc()。

我在这里创建了一个现场演示: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)
}

我正在使用 jQuery 在鼠标悬停时添加 .translate-less 类:

$(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 更骇人听闻。

Answer 1

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

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

这是您的脚本的修改版本:http://jsfiddle.net/xV84Z/1/ .

或者，虽然您不能在 IE 中的 translateX() 中使用 calc()(因为 a bug )，您可以应用多个 转换中的 translateX():

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

(但是，在这种情况下，90% 表示目标的 90%，而不是父级。)