老衲常谈的ie6,3像素bug
Mar 17, 2014
ie6经典的3pxBug产生条件:
当一个与浮动元素相邻的非浮动元素并没有指定具体的高度或宽度时,非浮动元素中的内容会和浮动元素的边界产生3px的空隙。这个空隙只沿着浮动元素显示,当浮动终止时,文本就恢复正常了。如果非浮动的元素指定了一个具体的宽度或高度,这个时候非浮动元素和浮动元素出现了3px的空隙。
ie6 3像素bug,很奇特、很恶心,但同时它也很受欢迎,很出名。应该是当初每一个weber,学习css的时候,都会遇到的Bug。产生的条件上面已经解释的很详细了,总结一下,产生的条件可以造成两种不同的结果(但间距都是3px)。
1、非浮动元素内的内容与浮动元素之间的3px间距;
2、非浮动元素与浮动元素之间的3px间距。
解决办法可以总结为:触发ie6下的haslayout和margin-right:-3px;
可以查看demo: ie6 3像素bug