CSS的宽度包括填充？
看来，在IE中，宽度包括填充大小。 而在FF中，宽度不是。 我怎样才能使两个performance一样？
谢谢。
-
IE用来使用更方便但非标准的“边框”框模型。 在这个模型中，元素的宽度包括填充和边框。 例如：
#foo { width: 10em; padding: 2em; border: 1em; }
将是10em宽。 -
相比之下，所有标准恐惧的浏览器默认为“内容框”框模型。 在此模型中，元素的宽度不包括填充或边框。 例如：
#foo { width: 10em; padding: 2em; border: 1em; }
实际上是16em宽：每边10em+2em填充，每边加1em边界。
如果你使用有效的标记 ，一个好的文档types和适当的标题 ，它将坚持标准的现代版本的IE浏览器。 否则，您可以强制现代符合标准的浏览器通过以下方式使用“边框”：
* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
第一个声明是Opera需要的，第二个是Firefox，第三个是Webkit和Chrome。
下面是我几年前testing的一个简单的testing，用于testing您的浏览器支持的盒子大小声明： http : //phrogz.net/CSS/boxsizing.html
请注意，Webkit（Safari和Chrome）不支持通过任何声明padding-box框框模型。
一个简单的规则是尽量避免使用相同元素的padding / margin和width属性。 即使用类似的东西
<div class="width-div"> <div class="padding-div"> ........... ........... </div> </div>
我碰到这个问题，尽pipe已经有几年了，但我还是想补充一点，以免有人碰到这个问题。
CSS3现在有一个box-sizing属性。 如果你设置，比如说.bigbox { box-sizing:border-box; width: 1000px; border: 5px solid #333; padding: 10px; } .bigbox { box-sizing:border-box; width: 1000px; border: 5px solid #333; padding: 10px; } .bigbox { box-sizing:border-box; width: 1000px; border: 5px solid #333; padding: 10px; }你的类将是1000px宽，而不是1030px。 当然，对于任何使用像素尺寸的液体边界的人来说，这是非常有用的，因为它解决了一个不可解决的问题。
更好的是，除了IE7及以下版本之外，所有主stream浏览器都支持盒子大小调整。 要包含宽度或高度尺寸内的所有项目，请将框尺寸设置为边框。 要将其他项目聚合到默认的宽度和/或高度，可以将框的大小设置为“content-box”。
我不确定浏览器语法的当前状态，但是我仍然包括-moz和-webkit前缀： .bigbox{ -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .bigbox{ -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
你有宣称的文档types吗？ 当我开始编码的HTML我有这个问题，并没有一个DOCTYPE宣布。 我最喜欢的是：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> ... </html>
