IE6中width的问题
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
而在IE6以前的版本,对象的实际宽度却等于:
margin-left + width + margin-right
在IE7中,已经提供了针对此问题的解决方案
百分数是相对于父元素的 width(height) 计算的
注释:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
body {
margin-left: 0px;
margin-top: 0px;
}
#a{
width:100px;
height:100px;
background-color:#eeeeee;
border:5px solid #bbbbbb;
margin:10px;
}
#b{
width:100px;
height:100px;
border:5px solid #bbbbbb;
background-color:#999999;
margin:10px;
}
-->
</style></head>
<body>
<div id="a">a</div>
<div id="b">b</div>
</body>
</html>
body {
margin-left: 0px;
margin-top: 0px;
}
#a{
width:100px;
height:100px;
background-color:#eeeeee;
border:5px solid #bbbbbb;
margin:10px;
float:left;
}
#b{
width:100px;
height:100px;
border:5px solid #bbbbbb;
background-color:#999999;
margin:10px;
float:left;
clear:left;
}
-->
</style></head>
<body>
<div id="a">a</div>
<div id="b">b</div>
</body>
</html>