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

你可能感兴趣的:(bug)