calc ie支持,IE 10 + 11：使用calc（）的CSS转换不起作用

I am animating a container on mouseover from right to the left with CSS transitions. This works fine in all browsers except Internet Explorer. The reason is that I am using (and need to use) calc() in my CSS left property.

I created a live demo here: Live Demo

The CSS looks like this:

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)

}

I am adding the class .translate-less on mouseover with jQuery:

$(document)

.on( 'mouseenter', 'div', function(){

$(this).addClass('translate-less')

})

.on( 'mouseleave', 'div', function(){

$('div').removeClass('translate-less');

})

Now I would like to have a smooth transition in Internet Explorer. For that, I would even ditch the calc() for these specific browsers and add a rule like left: 85%;. But IE 10 and 11 have dropped support for conditional comments and there seems to be no way to target these browsers specifically. IE 10 can be targeted with the -ms-high-contrast-hack, but IE 11 cannot. I do not want to use JavaScript to detect the browser because this seems even hackier than using CSS hacks.

Any help? Thanks in advance!

解决方案

Maybe transform: translateX() can provide a work-around. Depending on the circumstances, using transforms and the right property might be better:

right: 10%;

transform: translateX(-4rem);

Here is a modified version of your script: http://jsfiddle.net/xV84Z/1/.

Alternatively, while you can't use calc() within a translateX() in IE (because of a bug), you can apply multiple translateX()s in a transform:

/* This */

transform: translateX(90%) translateX(-4rem);

/* is equivalent to this */

transform: translateX(calc(90% - 4rem));

(However, 90% in this case means 90% of the target, not the parent.)