CSS的宽度是否包含填充？

Question

似乎在IE中,宽度包括填充大小.而在FF中,宽度不是.我怎样才能使两者表现相同？

谢谢.

Answer 1

• IE过去常常使用更方便但非标准的"边框"框模型.在此模型中,元素的宽度包括填充和边框.例如:
  #foo { width: 10em; padding: 2em; border: 1em; }
  会很10em宽.

• 相比之下,所有关注标准的浏览器都默认使用"内容框"框模型.在此模型中,元素的宽度不包括填充或边框.例如:
  #foo { width: 10em; padding: 2em; border: 1em; }
  实际上是16em宽的:每边都有10em+ 2em填充,每边1em都有边框.

如果您使用具有有效标记的IE的现代版本,良好的doctype和适当的标题,它将遵循标准.否则,您可以通过以下方式强制符合现代标准的浏览器使用"border-box":

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

Opera需要第一个声明,第二个是Firefox,第三个是Webkit和Chrome.

这是我多年前做的一个简单的测试,用于测试浏览器支持的框大小声明:http://phrogz.net/CSS/boxsizing.html

请注意,Webkit(Safari和Chrome)不支持padding-box通过任何声明的盒子模型.

Answer 2

一个简单的规则是尽量避免对同一元素使用填充/边距和宽度属性.即使用类似的东西

<div class="width-div">
     <div class="padding-div">
     ...........
     ...........
     </div>
 </div>

Answer 3

我碰到了这个问题,即使它已经有几年了,我想我可能会添加这个,万一有人碰到这个帖子.

CSS3现在有一个box-sizing属性.如果你设置,比方说,

.bigbox {
    box-sizing: border-box; 
    width: 1000px; 
    border: 5px solid #333;
    padding: 10px;
}

你的班级将是1000px宽,而不是1030px.当然,对于使用带有液体div的像素大小边框的人来说,这是非常有用的,因为它解决了一个不可解决的问题.

更好的是,除IE7及以下版本外,所有主流浏览器都支持大小调整.要包括宽度或高度维度内的所有项目,请将box-sizing设置为border-box.要将其他项目聚合到宽度和/或高度(默认值),可以将框大小设置为"content-box".

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

.bigbox{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}