IE used to use the more-convenient-but-non-standard "border-box" box model. In this model, the width of an element includes the padding and borders. For example:
#foo { width: 10em; padding: 2em; border: 1em; }
would be 10em
wide.
In contrast, all standards-fearing browsers default to the "content-box" box model. In this model, the width of an element does not include padding or borders. For example:
#foo { width: 10em; padding: 2em; border: 1em; }
will actually be 16em
wide: 10em
+ 2em
padding for each side, + 1em
border for each edge.
如果您使用带有valid markup、good doctype和appropriate headers的现代版本IE,它将遵循该标准.否则,您可以通过以下方式强制现代兼容标准的浏览器使用"边框":
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
The first declaration is needed for Opera, the second is for Firefox, the third is for Webkit and Chrome.个
这是我几年前做的一个简单测试,用来测试您的浏览器支持什么框大小声明:http://phrogz.net/CSS/boxsizing.html
Note that Webkit (Safari and Chrome) do not support the 100 box model via any declaration.