IE6 两个div有间隙的问题（IE 3px bug）解决方法

最新推荐文章于 2019-08-07 07:32:34 发布

spring21st

最新推荐文章于 2019-08-07 07:32:34 发布

阅读量4.2k

点赞数

分类专栏： DHTML 文章标签： ie div float class html 测试

本文链接：https://blog.csdn.net/spring21st/article/details/5323517

版权

DHTML 专栏收录该内容

132 篇文章 0 订阅

订阅专栏

在IE7中两个div是紧挨着的，但是在IE6中会出现两个div之间出现3px左右的间隙，这就是传说中的“IE 3px bug”。

解决方法如下：

且看示例：

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-eq<a href="http://www.mjjzz.com/CSS/ui/" mce_href="http://www.mjjzz.com/CSS/ui/" target="_blank" class="keylink">ui</a>v="Content-Type" content="text/html; charset=utf-8" /> <title>ChaiChunyan fixed ie 3px bug demo</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> #left { float:left; width:200px; height:100px; background:#f00; } #right { float:left; width:200px; height:100px; background:#fc0; }</style> </head> <body> <div id="left">left</div> <div id="right">right</div> </body> </html>

注意：

1. 此方法不用再使用以前调换两个div位置，将第二个div的float 设置为right

2. 如果这两个层包含在同一个层下边，注意父节点的层不要再使用 float: left

此解决方法适用IE6+ ， FF 2.0+

网上还有提供相对IE6定义#left margin-right:-3px; 可以测试一下。