ie6 经典的 3pxBug 产生条件:

当一个与浮动元素相邻的非浮动元素并没有指定具体的高度或宽度时,非浮动元素中的内容会和浮动元素的边界产生 3px 的空隙。这个空隙只沿着浮动元素显示,当浮动终止时,文本就恢复正常了。如果非浮动的元素指定了一个具体的宽度或高度,这个时候非浮动元素和浮动元素出现了 3px 的空隙。

ie6 3 像素 bug, 很奇特、很恶心,但同时它也很受欢迎,很出名。应该是当初每一个 weber, 学习 css 的时候,都会遇到的 Bug。产生的条件上面已经解释的很详细了,总结一下,产生的条件可以造成两种不同的结果(但间距都是 3px)。

1、非浮动元素内的内容与浮动元素之间的 3px 间距;

2、非浮动元素与浮动元素之间的 3px 间距。

解决办法可以总结为:触发 ie6 下的 haslayout 和 margin-right:-3px;

可以查看 demo: ie6 3 像素 bug

本文地址 https://shaoshilei.com/2014-03/laona-often-talk-ie63-pixel-bug.html