IE6中width的问题

XHTML CSS 常见问题和解决方案 

按照样式表的规则,对象的实际宽度为其下列属性值之和:
margin-left + border-left + padding-left  + width +  padding-right + border-right + margin-right
而在IE6以前的版本,对象的实际宽度却等于:
margin-left + width + margin-right

在IE7中,已经提供了针对此问题的解决方案

 百分数是相对于父元素的 width(height) 计算的

垂直方面margin合并的例子

注释:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。


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>

 

相关文章:

  • 2021-10-19
  • 2021-12-16
  • 2021-06-01
  • 2021-11-19
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-08-21
  • 2022-12-23
  • 2022-01-06
  • 2021-12-16
  • 2021-10-24
相关资源
相似解决方案