May
22
此BUG只出现在IE6及以下版本浏览器中,不过这个BUG貌似地球人都知道了,其实原因都不是很明白,就是知道如何解决!
请在IE6下测试,IE7正常,请比较。
<br/><br/><head><br/><style><br/>.floatbox{float:left;width:150px;height:150px;background-color:#999999;margin:5px 0 5px 100px;}<br/></style><br/></head><br/><br/><div style="border:1px solid #000;"> <div class="floatbox">float</div> <div style="clear:both"></div></div><br/>
BUG出现的条件:
This bug only occurs when the float margin goes in the same direction as the float and is trapped directly between the float and the inside edge of the container box. Any following floats with a similar margin won’t show the doubled margin. Only the first float in any given float row will suffer from the bug. Also, the doubled margin displays symmetry, working the same way to the right as it does to the left.
就是说只有在浮动和起作用的margin在同一方向上时才会引发这个BUG,试试把floatbox的float改为right。
BUG原因
未知=.=!就是浏览器解释上的问题了。
解决方法:
为浮动元素添加display:inline属性
这样就正常了
<br/><br/><head><br/><style><br/>.floatbox{float:left;width:150px;height:150px;background-color:#999999;margin:5px 0 5px 100px;display:inline;}<br/></style><br/></head><br/><br/><div style="border:1px solid #000;"> <div class="floatbox">float</div> <div style="clear:both"></div></div><br/>




no comment untill now