IE常见BUG总结（持续更新）

ie6~7下display:inline-block无效

解决方案：需要hack触发hasLayout

1 //IE6、7中内联元素（如span）触发layout属性后， 它的行为和标准中的 inline-block类似
2 //IE6、7中块级元素（如div）触发layout属性，同时设置了 display: inline ，那么它的行为和标准中 inline-block 类似
3 {
4     *display: inline;
5     *zoom:1;
6 }

IE6及更早浏览器只支持a(具有href属性)元素的:hover

IE6浮动元素与非浮动元素相邻的3px间距bug

解决方案：为浮动元素添加一个-3px的margin值，如元素左浮动时：

1 {_margin-right:-3px;}

 

IE6双倍margin

问题：IE6中，首个浮动到父元素边上元素，如果具有该方向的margin值，margin值会以双倍显示

解决方案：为浮动元素添加属性display:inline;

IE6中li元素的垂直间隙

问题：IE6中项目列表li的子元素浮动的时候，li之间会产生垂直的间隙，撑开ul 使高度增加

解决方案：

• 为li添加浮动

  1 li {float:left/right;}

• 在定义li元素的垂直对齐方式

  li {vertical-align:middle;}

  //其他值也可以

IE6中定位位置错误

问题：如果参照物(position:relative;)没有触发haslayout，那么在ie6中“绝对定位的容器”的left和bottom就会有问题。 （PS:top和right表现正常）

描述：

解决方案：在“相对定位的父容器”上加入 zoom:1 来触发ie的haslayout即可解决

小技巧：通常我们在设置一个容器为position:relative的时候，都会加上zoom:1来解决很多ie下的问题

IE67中定位元素溢出不动

问题： IE67中容器出线滚动条时，如果子元素为定位元素（绝对或相对），在拖动滚动条时该元素不会跟随移动

描述：

1 <div class="wrapper">
2     <div class="content1">在ie67下，红色区域溢出，拖动垂直或水平滚动条时，红色区域不会动</div>
3     <div class="relative">position:relative;</div>
4     <div class="content2">&nbsp;</div>
5 </div>

解决方案：只需要在有滚动条的容器上也设置相对定位即可

1 .wrapper {position:relative;}

IE6中绝对定位1像素偏差

问题：IE6下参照物宽高为奇数时，绝对定位元素设置了位置为right和bottom为0或者left和top为100%时，仍会有1px的空隙

描述：

1 .wrapper {position:relative;width:501px;height:101px;margin:50px;background:#66c;}
2 .wrapper .itm{position:absolute;width:40px;height:40px;background:#4e3;}
3 .wrapper .itm-1{top:0;left:0;}
4 .wrapper .itm-2{top:0;right:0;}
5 .wrapper .itm-3{left:100%;top:100%;}
6 .wrapper .itm-4{left:0;bottom:0;}
7 .wrapper .itm-5{right:100%;bottom:100%;}

 

1 <div class="wrapper">
2     <div class="itm itm-1">&nbsp;</div>
3     <div class="itm itm-2">&nbsp;</div>
4     <div class="itm itm-3">&nbsp;</div>
5     <div class="itm itm-4">&nbsp;</div>
6     <div class="itm itm-5">&nbsp;</div>
7 </div>

 

解决方案：照物宽高设置为偶数

IE6中定位元素消失

问题：ie6中，当容器子元素中同时具有具有浮动元素和绝对定位元素时，绝对定位的子元素会消失

解决方案：绝对定位元素设置清楚浮动clear:both;。如果浮动元素在文档顺序上排列在绝对定位元素之后，还要为浮动元素设置

1 {_margin-right:-3px;}/* 和浮动方向相反即可 */

IE67中表单元素偏离

问题：当“某些表单元素”的“父元素上触发了haslayout”后，这些表单元素会以“祖先元素上的margin-left值”偏离

描述：

1 .m-demo{width:400px;margin:0 0 10px;background:#ddd;}
2 .m-demo .itm{margin-left:100px;zoom:1}
3 .m-demo-fix .itm .inner{zoom:1;}

 1 <p>当“某些表单元素”的“父元素上触发了haslayout”后，这些表单元素会以“祖先元素上的margin-left值”偏离</p>
 2 <div class="m-demo">
 3     <div class="itm"><input /></div>
 4     <div class="itm"><textarea></textarea></div>
 5 </div>  
 6 <h2>fix</h2>
 7 <p>在“父元素外或内”“再嵌套一个触发haslayout的元素”即可</p>
 8 <div class="m-demo m-demo-fix">
 9     <div class="itm"><div class="inner"><input /></div></div>
10     <div class="itm"><div class="inner"><textarea></textarea></div></div>
11 </div>

 

解决方案：在“父元素外或内”“再嵌套一个触发haslayout的元素”即可，或者

1 .m-demo .itm *,{margin-left:-100px;} /*IE7及以下的选择器hack写法*/

IE6 7的a链接失效

问题：ie6、7，对于以下这样的结构，如果span触发了haslayout，那么图片区域将点击无效

1 <div class="m-demo"> 
2     <a href="#link">
3         <span>
4             <img src="xxx.jpg" />
5         </span>
6     </a>
7 </div>

 

解决方案：给图片设置position:relative;z-index:-1;再给a设置cursor:pointer;

IE 6 overflow:visiable;会撑开容器

问题：IE 6 会扭曲默认的overflow visible值并将水平和垂直地扩展一个盒子一匹配内容。

参考资料：http://nec.netease.com/library/category/#bug