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

Question

我使用CSS过渡从右到左动画鼠标悬停的容器.这适用于除Internet Explorer之外的所有浏览器.原因是我在CSS left属性中使用(并且需要使用)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鼠标悬停时添加了.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已经放弃了对条件评论的支持,似乎没有办法专门针对这些浏览器.IE 10可以使用-ms-high-contrast-hack进行攻击,但IE 11不能.我不想使用JavaScript来检测浏览器,因为这似乎比使用CSS hacks更加骇人听闻.

Answer 1

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

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

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

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

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

(但是,在这种情况下,90%意味着90%的目标,而不是父母.)