jquery .css() 不适用于 IE9
jquery .css() is not applying in IE9
我正在尝试在我的网页中移动一些图像,但发生的事情是代码在chrome,Firefox和IE10中运行良好。但是当涉及到IE9及更早版本时,它将不起作用。问题可能是 css3。但是我也需要在IE中移动幻灯片。请任何人通过提供另一种方式来帮助我。
脚本:
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
});
编辑:网页
<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>
IE9不支持css转换。
请改用 jQuery .animate()
:
$('#element_id').animate({
top: target + 'px'
}, dur);
只要确保#element_id
在CSS中有position:absolute
(或relative
)。
希望有帮助。
我会使用 Modernizr 来检测何时不支持 css 动画。使用现代化,它就像
:if(!Modernizr.cssanimations) {
//jQuery fallback
}
至于用jQuery旋转,我会使用:https://code.google.com/p/jqueryrotate/
相关文章:
- JQueryhide()不适用于Mozzilla,但适用于Chrome
- 动态修改CSS-适用于IE9,但不适用于Chrome和Firefox
- 异步表单w/Iframe Target——OnLoad适用于FF、Chrome、IE9,不适用于;无法在IE7中得到响应
- 如何在mvc中使用ajax jquery上传文件仅适用于IE9
- 谷歌图表适用于IE7,但不适用于IE8或IE9
- 从服务器读取的 ajax 文件 w3schools.com 示例适用于 IE9,但不适用于 FF12
- Ajax 调用 IE8 不显示所有数据,适用于 Firefox 和 IE9
- 用于填充下拉列表的Javascript适用于IE9以外的所有应用程序
- jQuery代码获胜'不适用于IE8,但适用于IE9
- Jquery blur不会'不适用于Firefox和Chrome,但适用于IE9
- CSS仅适用于IE9兼容模式下的IE11(不适用于本机IE9)
- CSS不适用于IE8、IE9,但适用于IE10及以上版本
- Javascript没有'不适用于IE8,但适用于IE9和FF
- focus()适用于ie9,但不适用于chrome, firefox
- innerHTML写上.value适用于IE9 IE8,但不适用于IE10, Firefox, Chrome
- Javascript只适用于IE Quirks, 7和Chrome和Firefox.不能在ie8或ie9标准中工作
- javascript菜单适用于除ie9(空白)以外的所有浏览器
- 网站适用于除Opera和IE9或更早版本之外的所有浏览器
- .animate()适用于Firefox、Chrome和IE9,但不适用于IE10(Jquery 1.8.3和1.9.1
- 适用于 IE9 和 FF4 - 不适用于 IE7 或 IE 8