带有calc()的CSS过渡在IE10 +中不起作用
我正在用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骇客还要骇人。
回答:
也许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%,而不是父级。)
以上是 带有calc()的CSS过渡在IE10 +中不起作用 的全部内容, 来源链接: utcz.com/qa/431368.html