IE下Bug汇总 更新中…

1月 18, 2014 1 条评论 1.56k 次阅读 0 人点赞

IE6/IE7中li底部4px的Bug

问题描述:

当li的子元素中有浮动(float)时,IE6/IE7中<li>元素的下面会产生4px空隙的bug。

HTML结构:

<ul id="list"> 
<li><div>vapour</div></li> 
<li><div>百度</div></li> 
<li><div>淘宝</div></li> 
<li><div>迅雷</div></li> 
</ul>

问题分析:

li的子元素浮动是这个bug产生的必要条件,这个bug产生的充要条件是li的子元素浮动并且li设置了以下CSS属性之一:width、height、zoom、padding-top、padding-bottom、margin-top、margin-bottom。

处理方法:

方法1 #list div设置clear:left|both,这时#list li不能设置width、height、zoom。
方法2 #list li设置float:left,这时#list li可以设置width、height、zoom。
#list li设置clear:left|both,这时#list li不能设置width、height、zoom。
方法3 IE6/IE7的这个Bug可以通过给li中的div设置vertical-align:top|middle|bottom解决。太怪异了,只要加上vertical-align的值是三者之一即可。

IE6/IE7中z-index层级无效bug

问题描述:

在正常浏览器下一般是没有问题的,但是在IE6、7下可能有时z-index设置了,可是有时你会发现他是没有起作用,

HTML结构:无

问题分析:

主要是他父级层级不够

处理方法:

给错乱的两个父级加上*position:relative;*z-index:1;  另一个覆盖他上面的父级加上*position:relative;*z-index:2;         (*号为IE6\IE7下的CSS Hack

孑愁

一个Microsoft、Google、Apple的爱好者综合体,喜欢一切和数码科技有关的东西,也希望能及时的把这些分享给关注它们的人。现就职于某互联网公司,担任前端

文章评论(1)

  • 小骆驼网

    给博主推荐个项目,免费领17元,更有50美元外汇操作金送,先到先得,欢迎前来交流。http://www.smallcamel.com/le-le-jin-rong/

    3月 20, 2014