原文地址:margin系列之bug巡演 by @doyoe
IE6浮动双倍margin bug
这当是IE6最为经典的bug之一。
触发方式
- 元素被设置浮动
- 元素在与浮动一致的方向上设置margin值
来看看详细的代码吧:
HTML
<div id="demo"> <p>IE6下浮动方向上的margin值将会双倍于其指定值</p> </div>
CSS
#demo { overflow: hidden; width: 400px; margin: auto; padding: 10px 0; background: #ddd; } #demo p { float: left; margin-left: 10px; background: #aaa; }
double margin
并不会发生在所有的浮动元素上,同个包含块内,在相同的浮动方向上,它只发生在第一个浮动元素上。
HTML
<div id="demo"> <p>第一个float:left</p> <p>第二个float:left</p> <p>第三个float:left</p> </div>
CSS
#demo { overflow: hidden; width: 400px; margin: auto; padding: 10px 0; background: #ddd; } #demo p { float: left; margin-left: 10px; background: #aaa; }
double margin只发生在float:left时?
HTML
<div id="demo"> <p class="a">1 float:left</p> <p class="b">2 float:left</p> <p class="c">3 float:right</p> <p class="d">4 float:right</p> </div>
CSS
#demo { overflow: hidden; width: 400px; margin: auto; padding: 10px 0; background: #ddd; } #demo .a, #demo .b{ float:left; margin-left:10px; } #demo .c, #demo .d{ float:right; margin-right:10px; }
是的,你可能想到了,第一个左浮动元素和第一个右浮动元素都将会出现 double margin
fix IE6浮动双倍margin bug
方法一:
_margin-left
#demo p { float: left; margin-left: 10px; _margin-left: 5px; background: #aaa; }
方法二:
display:inline
#demo p { float: left; margin-left: 10px; /*_margin-left: 5px;*/ _display: inline; background: #aaa; }
时间: 2024-10-08 00:32:17