似乎在IE中,宽度包括填充大小。而在FF中,宽度没有。如何使两者的行为相同?
谢谢。
IE曾经使用更方便但非标准的 “边框” 框模型。在此模型中,元素的宽度包括填充和边框。例如: #foo { width: 10em; padding: 2em; border: 1em; } 会很10em宽。
#foo { width: 10em; padding: 2em; border: 1em; }
10em
相反,所有违反标准的浏览器都默认使用 “内容框” 框模型。在此模型中,元素的宽度 不 包括填充或边框。例如: #foo { width: 10em; padding: 2em; border: 1em; } 实际上将是16em宽的:10em+ 2em每边填充,+ 1em每边边框。
16em
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通过任何声明支持盒子模型。
padding-box