Jquery - 與IE瀏覽器的CSS翻譯

我想使用jQuery向上將它的父div「register_tile」中的名爲「register_bottom_bar」的div向上翻譯174個像素。我在Chrome和Firefox中完美運行。Jquery - 與IE瀏覽器的CSS翻譯

如何在IE中執行相同的操作？我正在IE 8上測試它。

「register_tile」是一個浮動div，位於較大的div內，「register_bottom_bar」位於「register_tile」的底部，位置爲：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)'); 
});

來源

2012-12-12 hiteshspac

不確定IE8是否支持'translate'，你有沒有試過用'mordenizr'？ –

@badZoke我不知道'Modernizr'。我會馬上嘗試一下。 – hiteshspac

如果您需要舊版本的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); 
});

來源

2012-12-12 06:41:21 Gabriel

完美。在IE上工作。謝謝@加布裏埃爾！我可以向它應用「過渡」，它將在IE中工作嗎？ – hiteshspac

CSS 3 again :)請使用jQuery動畫代替：http://api.jquery.com/animate/ – Gabriel

jQuery動畫API正是我想要的程序。再次感謝@ Gabriel！ '：）' – hiteshspac

沒有任何種類的舊版本IE的過渡效果。（IE8不支持CSS3轉換）

我知道只有這樣，才能得到任何接近它是使用jQuery的fadeIn()和方法

你需要使用-ms-transform爲IE9

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

來源

2012-12-12 06:25:49

我明白了你的觀點。但是這種轉換在其他瀏覽器中很有魅力，我想要一個特定於IE的解決方案。我至少應該能夠將'register_bottom_bar'移動到所需的位置，而不會產生任何影響，因爲我想在點擊時顯示一些文本框來代替其默認位置。 – hiteshspac

Jquery - 與IE瀏覽器的CSS翻譯

回答

相關問題