Jquery – 使用IE进行CSS翻译

我想使用JQuery将其父div“register_tile”中的div称为“register_bottom_bar”，向上翻转174像素。 我让它在Chrome和Firefox中完美运行。

我怎么能在IE中做同样的事情？ 我在IE 8上测试它。

“register_tile”是一个较大div中的浮动div，“register_bottom_bar”位于“register_tile”的底部，其中position：relative。

$('.register_tile').click(function () { $(this).css('opacity', '1'); $(this).css('background-image', 'none'); $('.register_bottom_bar').css('-webkit-transform', 'translate(0,-174px)'); $('.register_bottom_bar').css('-moz-transform', 'translate(0,-174px)'); }); 

Answer 1

如果您需要支持旧版本的IE（6,7,8），则需要使用属性边距/位置。

 $('.register_tile').click(function () { $(this).css('opacity', '1'); $(this).css('background-image', 'none'); $('.register_bottom_bar').css('left', '-174px); // With absolute / relative positioning // OR $('.register_bottom_bar').css('margin-left', '-174px); }); 

Answer 2

旧版IE中没有任何过渡效果。（ IE8不支持CSS3转换 ）

我知道接触它的唯一方法是使用JQuery的fadeIn()和fadeOut()方法

你需要为ie9使用-ms-transform

 css(' -ms-transform', 'translate(0,-174px)'); 

来自MSDN

---

 -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ -o-transform: translate(50px,100px); /* Opera */ -moz-transform: translate(50px,100px); /* Firefox */