Question

似乎在IE中，宽度包括填充大小。而在FF中，宽度不是。我怎样才能使两者表现相同？

感谢。

Answer 1

IE过去常常使用更方便但非标准的“border-box”框模型。在此模型中，元素的宽度包括填充和边框。例如：
#foo { width: 10em; padding: 2em; border: 1em; }
<{1}}宽。
相比之下，所有关注标准的浏览器都默认使用“内容框”框模型。在此模型中，元素的宽度不包括填充或边框。例如：
10em
广度实际上为#foo { width: 10em; padding: 2em; border: 1em; }宽：16em + 10em每边填充，每边有+ 2em边框。

如果您使用现代版本的IE valid markup，good doctype和appropriate headers它将符合标准。否则，您可以强制使用符合标准的现代浏览器通过以下方式使用“border-box”：

1em

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

这是我多年前做的一个简单的测试，用于测试浏览器支持的框大小调整声明：http://phrogz.net/CSS/boxsizing.html

请注意，Webkit（Safari和Chrome）不通过任何声明支持* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }框模型。

Answer 2

一个简单的规则是尽量避免对同一元素使用填充/边距和宽度属性。即使用与此类似的东西

<div class="width-div">
     <div class="padding-div">
     ...........
     ...........
     </div>
 </div>

Answer 3

我遇到了这个问题，即使它已经有几年了，我想我可能会添加这个，万一有人碰到这个帖子。

CSS3现在有一个box-sizing属性。如果你设置，比方说，

.bigbox {
    box-sizing: border-box; 
    width: 1000px; 
    border: 5px solid #333;
    padding: 10px;
}

你的班级将是1000px宽，而不是1030px。当然，对于使用带有液体div的像素大小边框的人来说，这是非常有用的，因为它解决了其他不可解决的问题。

更好的是，除IE7及以下版本外，所有主流浏览器都支持大小调整。要包含宽度或高度维度内的所有项目，请将box-sizing设置为border-box。要将聚合其他项目设置为宽度和/或高度（默认值），您可以将框大小设置为“内容框”。

我不确定浏览器语法的当前状态，但我仍然包含-moz和-webkit前缀：

.bigbox{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Answer 4

您是否申报了doctype？当我开始编码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>

Answer 5

对于那些仍有问题的人， jQuery 提供了两个属性outerWidth ()和innerWitdh ()来了解对象的宽度没有国界......

CSS的宽度是否包含填充？

5 个答案: