CSS容器宽度的困惑

 

在标准CSS中，width（宽度）仅是包含容器内容的宽度，容器实际所占用的宽度还应加上padding（填充）和border（边框）。（高度也相类似）

容器占用宽度 = width + padding + border

Firefox浏览器严格遵循这一定义，但在IE浏览器上width却是指容器实际所占用的宽度，这就使得在同样CSS宽度下，IE浏览器上的容器占用宽度会显得小一些，这就给页面排版带来极大不便。

因此，在对宽度要求严格的地方，为了兼容IE浏览器，我们在设置width时应避免同时设置padding。而为了达到设置padding的目的，我们可以在内部嵌套一个容器，再单独设置padding：

<style type="text/css"> 
<!--
.test {  
    margin: 10px;
    width: 200px;
    heigh: 100px; 
}
.test div {
    padding: 10px;
}
-->
</style>
<div class="test">
<div>
测试  
</div>
</div> 

 

本文转自： http://study.soongsky.com/plus/view.php?aid=1