如何解决IE6/IE7中li底部4px空隙的Bug

代码如下:

• vapour


• 百度


• 淘宝


• 迅雷

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

知道了这个bug的产生条件，所以解决方法也就有了：

方法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的值是三者之一即可。

代码如下:

• vapour


• 百度


• 淘宝


• 迅雷

• vapour


• 百度


• 淘宝


• 迅雷

• vapour


• 百度


• 淘宝


• 迅雷

• vapour


• 百度


• 淘宝


• 迅雷

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注行业资讯频道，感谢您对的支持。