Jquery - 使用 IE 进行 CSS 翻译答案

【问题标题】：Jquery - CSS translation with IEJquery - 使用 IE 进行 CSS 翻译
【发布时间】：2012-12-12 06:18:13
【问题描述】：

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

如何在 IE 中做同样的事情？我正在 IE 8 上测试它。

“register_tile”是一个更大的div中的浮动div，“register_bottom_bar”位于“register_tile”的底部，位置：相对。

$('.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)');
});

【问题讨论】：

不确定 IE8 是否支持 translate，您是否尝试过使用 mordenizr？
@badZoke 我不知道 Modernizr 。我马上试试看。

标签： jquery css

【解决方案1】：

如果您需要支持旧版本的 IE（6、7、8），则需要使用属性 margin / position 来代替。

$('.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);
});

【讨论】：

完美。在IE上工作。谢谢@Gabriel！我可以将transition 应用于它，它可以在 IE 中使用吗？
jQuery animate API 正是我想要的程序。再次感谢@Gabriel！ :)

【解决方案2】：

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

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

ie9 需要使用-ms-transform

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

FROM 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 */

【讨论】：

我明白你的意思。但是这种转换在其他浏览器中就像一个魅力，我想要一个特定于 IE 的解决方案。我至少应该能够将register_bottom_bar 移动到所需位置而不会产生任何影响，因为我想在点击时显示一些文本框来代替其默认位置。