CSS的宽度是否包含填充？

Question

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

Answer 1

一个简单的规则是尝试避免对同一元素使用padding / margin和width属性。即使用类似的东西<div class="width-div">&nbsp; &nbsp; &nbsp;<div class="padding-div">&nbsp; &nbsp; &nbsp;...........&nbsp; &nbsp; &nbsp;...........&nbsp; &nbsp; &nbsp;</div>&nbsp;</div>

Answer 2

我碰到了这个问题，尽管它已经存在了两年，但我想我可以添加这个，以防有人碰到这个问题。CSS3现在具有box-sizing属性。如果您设定，说，.bigbox {&nbsp; &nbsp; box-sizing: border-box;&nbsp;&nbsp; &nbsp; width: 1000px;&nbsp;&nbsp; &nbsp; border: 5px solid #333;&nbsp; &nbsp; padding: 10px;}您的课程将是1000像素宽，而不是1030像素宽。当然，这对于使用像素大小的边框和液体div的人非常有用，因为它解决了原本无法解决的问题。更好的是，除IE7及更低版本外，所有主流浏览器均支持box-sizing。要包括宽度或高度尺寸内的所有项目，请将框大小设置为边框。要将其他项目聚合为默认的宽度和/或高度，可以将框大小设置为“内容框”。我不确定浏览器语法的当前状态，但仍包含-moz和-webkit前缀：.bigbox{&nbsp; &nbsp; -moz-box-sizing: border-box;&nbsp; &nbsp; -webkit-box-sizing: border-box;&nbsp; &nbsp; box-sizing: border-box;}