CSS的宽度是否包含填充？

Question

似乎在IE中，宽度包括填充大小。而在FF中，宽度没有。如何使两者的行为相同？

Answer 1

一个简单的规则是尝试避免对同一元素使用padding / margin和width属性。即使用类似的东西

<div class="width-div">

     <div class="padding-div">

     ...........

     ...........

     </div>

 </div>

Answer 2

我碰到了这个问题，尽管它已经存在了两年，但我想我可以添加这个，以防有人碰到这个问题。

CSS3现在具有box-sizing属性。如果您设定，说，

.bigbox {

    box-sizing: border-box; 

    width: 1000px; 

    border: 5px solid #333;

    padding: 10px;

}

您的课程将是1000像素宽，而不是1030像素宽。当然，这对于使用像素大小的边框和液体div的人非常有用，因为它解决了原本无法解决的问题。

更好的是，除IE7及更低版本外，所有主流浏览器均支持box-sizing。要包括宽度或高度尺寸内的所有项目，请将框大小设置为边框。要将其他项目聚合为默认的宽度和/或高度，可以将框大小设置为“内容框”。

我不确定浏览器语法的当前状态，但仍包含-moz和-webkit前缀：

.bigbox{

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

}