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每边边框。
  

如果您使用具有有效标记，良好doctype和适当标题.aspx#SetMode)的IE的现代版本，它将遵循该标准。否则，您可以通过以下方式强制符合现代标准的浏览器使用“边框”：

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

Opera需要第一个声明，Firefox需要第二个声明，Webkit和Chrome需要第三个声明。

请注意，Webkit（Safari和Chrome）不padding-box通过任何声明支持盒子模型。