jQuery的animate方法在IE7下出现小问题

时间:2024-01-17 21:34:20

接上,今天接着修改网站的bug,还是网页的这几张图片,还是滑动效果,但在IE7下不但几张图片只显示一张,更别提滑动效果了,根本滑不了啊;

然后打开IE的F12工具,先看样式,再看滑动效果;本来应该显示4张图片,但只显示了一张,这个错误既然是显示的错误,那直接在调试工具里,对着这个div的有关左右的属性,修改就可以了;

修改后发现,原来是margin这里出问题了,原来的样式是 margin:10px auto; 修改margin-left和margin-right,把它们去掉就行了,但是这是全局样式,定义在了一个main.css里,如果修改它的话,有可能影响到其他页面的样式,所以修改行内样式,把原来的给覆盖掉就行啦:

margin-left:0px;margin-right:0px;

然后修改完之后,分别测一下google,firefox,和IE的各个版本,显示没问题了,然后开始考虑图片的滑动效果;

图片的滑动,首先肯定想到要修改控制这段滑动的JS代码啊,然后查看JS代码:

$("#latelyView").stop(true,true).animate({"margin-left":nextMarginLeft*1-537},500);

看来看去,没发现这段代码有何问题;然后上网各种搜索,也没搜出在IE7下animate方法有问题;

然后仔细对animate中的属性进行查看,进行修改,修改后发觉,好像margin-left的值为正值时,程序就可滑动,虽然滑的方向不对;当margin-left为负值时,滑动效果就没有了,大致推断,有可能是margin-left的负值造成的;

然后开始搜索IE下margin的负值对IE是否有影响,结果,没错,IE6/7下margin的负值对网页有一定的影响,而且影响有好几种,具体不说,可自行搜索;

知道原因就好做了,然后给这个div添加属性,

<div id="latelyView" style="*zoom:1;_position:relative;">

首先,这个zoom:1是IE特有的属性,其他浏览器不支持,它的作用有好多种,如触发IE的hasLayout属性,清除浮动、清除margin的重叠等;关于zoom:1的具体作用,可参考:http://www.cnblogs.com/top5/archive/2011/07/11/2103343.html

position:relative 好理解,相对于正常位置进行定位嘛;

到此,IE7下的问题就解决了;不得不说,万恶的IE,万恶的BUG;