标签:
原文地址:margin系列之bug巡演 by @doyoe
这当是IE6最为经典的bug之一。
来看看详细的代码吧:
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; }
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; }
方法一:
_margin-left
#demo p { float: left; margin-left: 10px; _margin-left: 5px; background: #aaa; }
方法二:
#demo p { float: left; margin-left: 10px; /*_margin-left: 5px;*/ _display: inline; background: #aaa; }
标签:
原文地址:http://www.cnblogs.com/peterli2013/p/4287726.html