jquery .css（）不適用於IE9

我試圖在我的網頁中移動一些圖片，但是會發生什麼情況是代碼在Chrome，Firefox和IE10中運行良好。但是當涉及到IE9和更早版本時，它將無法工作。問題可能是css3。但我還需要在IE中移動幻燈片。請任何人通過提供替代方式來幫助我。jquery .css（）不適用於IE9

腳本：

target = (vertical) ? "translate(0," + target + ")" : "translate(" + target + ",0)"; 
dur = (dur !== undefined) ? (dur/1000) + "s" : "0s"; 
slider.container.css({ 
    "transform":target , 
    "-moz-transition-duration":dur, 
    "-webkit -transition-duration": dur, 
    "-o-transition-duration": dur, 
    "transition-duration": dur 
});

編輯：HTML

<div id="flexslider-1" class="flex-flexslider flexslider"> 
<ul class="slides"><li> 
<div class="views-field views-field-title"> 
<span class="field-content"><a href="/oxavdDev/?q=Nicole_Zitzmann">Nicole Zitzmann</a> </span> </div> 
<div class="views-field views-field-field-image"> 
<div class="field-content"><a href="/oxavdDev/?q=Nicole_Zitzmann"><img typeof="foaf:Image" src="/oxavdDev/sites/default/files/styles/flexslider_thumbnail/public/Nicole%20Zitzmann.jpg?itok=-7p1j_PM" width="150" height="150" alt="" /></a></div> </div></li> 
<li> 
<div class="views-field views-field-title">  <span class="field-content"><a href="/oxavdDev/?q=Melanie_Beer">Melanie Beer</a></span> </div> 
<div class="views-field views-field-field-image">  <div class="field-content"><a href="/oxavdDev/?q=Melanie_Beer"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/Melanie%20Beer.jpg?itok=2a6CrwFK" width="150" height="150" alt="Melanie Beer" title="Melanie Beer" /></a></div> </div></li> 
<li> 
<div class="views-field views-field-title">  <span class="field-content"><a href="/oxavdDev/?q=Juan_Bolivar_Gonzalez">Juan Bolivar Gonzalez</a></span> </div> 
    <div class="views-field views-field-field-image">  <div class="field-content"><a href="/oxavdDev/?q=Juan_Bolivar_Gonzalez"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/Juan%20Bolivar%20Gonzalez.jpg?itok=FlkwxHKX" width="150" height="150" alt="" /></a></div> </div></li> 
<li> 
    <div class="views-field views-field-title">  <span class="field-content"><a href="/oxavdDev/?q=Alex_Caputo">Alex Caputo</a></span> </div> 
    <div class="views-field views-field-field-image">  <div class="field-content"><a href="/oxavdDev/?q=Alex_Caputo"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/Alex_1.jpg?itok=RMSQMJUv" width="150" height="150" alt="" /></a></div> </div></li> 
<li> 
    <div class="views-field views-field-title">  <span class="field-content"><a href="/oxavdDev/?q=Emma_Dixon">Emma Dixon</a></span> </div> 
    <div class="views-field views-field-field-image">  <div class="field-content"><a href="/oxavdDev/?q=Emma_Dixon"><img typeof="foaf:Image" src="default/files/styles/flexslider_thumbnail/public/Emma%20Dixon_0.jpg?itok=jQaCMqWs" width="150" height="150" alt="" /></a></div> </div></li> 
<li> 
    <div class="views-field views-field-title">  <span class="field-content"><a href="/oxavdDev/?q=Constantina_Fotinou">Constantina Fotinou</a></span> </div> 
    <div class="views-field views-field-field-image">  <div class="field-content"><a href="/oxavdDev/?q=Constantina_Fotinou"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/ConstantinaFotinou.jpg?itok=1zs5Ozyc" width="150" height="150" alt="" /></a></div> </div></li> 
<li> 
    <div class="views-field views-field-title">  <span class="field-content"><a href="/oxavdDev/?q=Bevin_Gangadharan">Bevin Gangadharan</a></span> </div> 
    <div class="views-field views-field-field-image">  <div class="field-content"><a href="/oxavdDev/?q=Bevin_Gangadharan"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/bevin_0.jpg?itok=DrPlXDjd" width="150" height="150" alt="" /></a></div> </div></li> 
<li> 
    <div class="views-field views-field-title">  <span class="field-content"><a href="/oxavdDev/?q=Michelle_Hill">Michelle Hill</a></span> </div> 
    <div class="views-field views-field-field-image">  <div class="field-content"><a href="/oxavdDev/?q=Michelle_Hill"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/Michelle.jpg?itok=sB91t6jb" width="150" height="150" alt="" /></a></div> </div></li> 
<li> 
    <div class="views-field views-field-title">  <span class="field-content"><a href="/oxavdDev/?q=JL_Kiappes">J.L. Kiappes</a></span> </div> 
    <div class="views-field views-field-field-image">  <div class="field-content"><a href="/oxavdDev/?q=JL_Kiappes"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/JL%20Kiappes.jpg?itok=BWWk8dYA" width="150" height="150" alt="" /></a></div> </div></li> 
<li> 
    <div class="views-field views-field-title">  <span class="field-content"><a href="/oxavdDev/?q=Abhinav_Kumar">Abhinav Kumar</a></span> </div> 
    <div class="views-field views-field-field-image">  <div class="field-content"><a href="/oxavdDev/?q=Abhinav_Kumar"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/Abhinav.jpg?itok=KLnzz1L-" width="150" height="150" alt="" /></a></div> </div></li> 
<li> 
    <div class="views-field views-field-title">  <span class="field-content"><a href="/oxavdDev/?q=Jo_Miller">Jo Miller</a></span> </div> 
    <div class="views-field views-field-field-image">  <div class="field-content"><a href="/oxavdDev/?q=Jo_Miller"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/Untitled-1.jpg?itok=-SlZu5ik" width="150" height="150" alt="" /></a></div> </div></li> 
<li> 
    <div class="views-field views-field-title">  <span class="field-content"><a href="/oxavdDev/?q=Ben_Oestringer">Ben Oestringer</a></span> </div> 
    <div class="views-field views-field-field-image">  <div class="field-content"><a href="/oxavdDev/?q=Ben_Oestringer"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/default_images/download.jpg?itok=e9dEkn3I" width="150" height="150" alt="" /></a></div> </div></li> 
<li> 
    <div class="views-field views-field-title">  <span class="field-content"><a href="/oxavdDev/?q=Pietro_Roversi">Pietro Roversi</a></span> </div> 
    <div class="views-field views-field-field-image">  <div class="field-content"><a href="/oxavdDev/?q=Pietro_Roversi"><img typeof="foaf:Image" src="/sites/default/files/styles/flexslider_thumbnail/public/pietro.jpg?itok=I1BIVIRl" width="150" height="150" alt="" /></a></div> </div></li> 
<li> 
    <div class="views-field views-field-title">  <span class="field-content"><a href="/oxavdDev/?q=Andrew">Andrew Sayce</a></span> </div> 
    <div class="views-field views-field-field-image">  <div class="field-content"><a href="/oxavdDev/?q=Andrew"><img typeof="foaf:Image" src="/sites/default/files/styles/flexslider_thumbnail/public/AndrewSayce1.jpg?itok=D-5ByU9B" width="150" height="150" alt="" title="Andrew Sayce" /></a></div> </div></li> 
<li> 
    <div class="views-field views-field-title">  <span class="field-content"><a href="/oxavdDev/?q=Simon_Spiro">Simon Spiro</a></span> </div> 
    <div class="views-field views-field-field-image">  <div class="field-content"><a href="/oxavdDev/?q=Simon_Spiro"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/Simon.jpg?itok=SBK4e1n1" width="150" height="150" alt="" /></a></div> </div></li> 
<li> 
    <div class="views-field views-field-title">  <span class="field-content"><a href="/oxavdDev/?q=Steve_Woodhouse">Steve Woodhouse</a></span> </div> 
    <div class="views-field views-field-field-image">  <div class="field-content"><a href="/oxavdDev/?q=Steve_Woodhouse"><img typeof="foaf:Image" src="sites/default/files/styles/flexslider_thumbnail/public/Steve%20Woodhouse.jpg?itok=MPYu6ILP" width="150" height="150" alt="" /></a></div> </div></li> 
</ul></div>

來源

2013-10-21 james

IE9 doesn't support css transitions.

使用jQuery .animate()代替：

$('#element_id').animate({ 
    top: target + 'px' 
}, dur);

只是確保#element_id有position:absolute（或relative）在CSS中。

希望有所幫助。

來源

2013-10-21 08:00:46 geevee

這只是一半的答案的問題。 OP需要另一種解決方案/解決方法。 –

@Gal我正在尋找替代解決方案。 – james

iv'e編輯了答案。 – geevee

我會使用Modernizr來檢測何時不支持css動畫。隨着Modernizr的，它是那樣簡單：

if(!Modernizr.cssanimations) { 
    //jQuery fallback 
}

至於與jQuery旋轉，我會用：https://code.google.com/p/jqueryrotate/

來源

2013-10-21 08:03:58 Neel

'transform'屬性似乎表示翻譯，而不是旋轉。 –

旋轉只是一個例子 – Neel

jquery .css（）不適用於IE9

回答

相關問題