Question

我通过CSS过渡从右到左为鼠标移动设置动画。这适用于除Internet Explorer之外的所有浏览器。原因是我在CSS left属性中使用（并且需要使用）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黑客更加骇人听闻。

Answer 1

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

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

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

或者，虽然您无法在IE中的calc()内使用translateX()（因为a bug），但您可以在转换中应用多个translateX()：< / p>

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

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

使用calc（）的CSS转换在IE10 +中不起作用

1 个答案: