小编典典

CSS的宽度是否包含填充?

css

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

谢谢。


阅读 311

收藏
2020-05-16

共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通过任何声明支持盒子模型。

2020-05-16