阅读量:0
IE6 中的两个 div 之间出现间隙的问题被称为 IE 3px bug。
IE6 两个div有间隙的问题（IE 3px bug）
问题描述
在IE7中，两个div是紧挨着的，但在IE6中会出现两个div之间出现3px左右的间隙，这就是所谓的“IE 3px bug”。
解决方法
| 方法 | 描述 | 适用浏览器 |
| 浮动法 | 将第二个div的float设置为right | IE6+，FF 2.0+ |
| 负边距法 | 设置#left的margin-right为-3px | IE6 |
| Overflow隐藏法 | 在某个div的css中增加overflow:hidden; | IE6和IE7 |
具体实现
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>ChaiChunyan fixed ie 3px bug demo</title> <style type="text/css"> #left { float: left; width: 200px; height: 100px; background: #f00; } #right { float: right; width: 200px; height: 100px; background: #fc0; } </style> </head> <body> <div id="left">left</div> <div id="right">right</div> </body> </html>相关问题与解答
| 问题 | 解答 |
| 为什么在IE6下会有3px的间隙？ | 这是由于IE6对浮动元素的盒模型处理方式与其他浏览器不同导致的。 |
| 如何解决在包含父级div的情况下的3px间隙问题？ | 如果这两个div包含在另一个已经浮动的div中，使用overflow:hidden;的方法会更有效。 |
小伙伴们，上文介绍了“IE6 两个div有间隙的问题（IE 3px bug）”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。
