日期:2014-05-16  浏览次数:20429 次

JS不兼容,或者cs不兼容!ie6中显示乱套了!!
(function () {
  var imgbox = document.getElementById("imgbox");
  var pic_list = document.getElementById("pic_list");
  var pics = pic_list.getElementsByTagName("li");
  var button = document.getElementById("button").getElementsByTagName("li");
  var p;
  var start;
  function autoplay(start) {
  for (i = start; i < button.length; i++) { //设置起始值为start参数.
  (function () {
  var p = i; // 为p赋值i. i等于0,1,2,3,4;
  button[i].onmouseover = function change() { //button[0],button[1],button[2],button[3],button[4] onmouseover可以触发函数;
  for (j = 0; j < this.parentNode.childNodes.length; j++) { //以this(当前触发事件的元素)为起点,的父节点的所有子节点的length值为最高值,开始遍历. ;
  this.parentNode.childNodes[j].setAttribute("className", ""); //以this(当前触发事件的元素)为起点,的父节点的所有子节点的className为空. 危险慎用.;
  }
  this.className = "current"; //this. 即当前触发onmouseover的元素的className为"current";
  for (m = 0; m < pics.length; m++) { //以pics.length为最高值进行遍历.遍历pics.;
  pics[m].className = ""; //清空所有pics数组中所有元素的className;
  if (m == p) { //当m==p (p==i) 所以m=i时,触发下列函数
  pics[m].className = "show"; //pics的第m个元素的className值为show; m在这里等于i;
  }
  }
  }
  })();
  }
  }
  autoplay(0);
})();

------解决方案--------------------
<div class="area mid" style="float: left
改成

<div class="area mid" style="float: left; display:left

这里是个ie6的使用float时margin双倍的bug,使用display:left可以修正。

另外,楼上 做网页兼容ie6是必须的,因为你没有理由让客户从ie6升级
------解决方案--------------------
<div class="area mid" style="float: left; margin-left: 7px; padding-top: 0px; height: 242px; _overflow:hidden;">
<div id="imgbox" class="bbbb" style="margin-top: 0px; padding-top: 0px">
<ul id="pic_list" class="" style="text-align: center;">
<li class="show" id="one">
<img src="images/1.jpg" style="margin-top: 0px; padding-top: 0px" width="243px"
height="245px" /></li>
<li id="two">
<img src="images/2.jpg" style="margin-top: 0px; padding-top: 0px" width="243px"
height="245px" /></li>
<li id="three">
<img src="images/3.jpg" style="margin-top: 0px; padding-top: 0px" width="243px"
height="247px" /></li>
</ul>
<div style="line-height: 18px; position: absolute; bottom: 0px; width: 240px">
<ul id="button">
<li class="current" id="but_one">1</li><li id="but_two">2</li><li id="but_three">3</li>
</ul>
</div>
</div>
</div&