元素宽度包括填充吗？

似乎在 Internet Explorer (IE)的宽度包括填充，而在火狐(FF)的宽度不包括。

我怎样才能让两者表现相同呢？

104191 次浏览
小开

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

<div class="width-div">
<div class="padding-div">
...........
...........
</div>
</div>
小开
最佳答案

  • IE 过去使用的是比较方便但非标准的 “边框”盒子模型。在此模型中，元素的宽度包括填充和边框。例如:
    #foo { width: 10em; padding: 2em; border: 1em; }
    会是 10em宽

  • 相比之下，所有害怕标准的浏览器都默认使用 “内容盒”框模型。在这个模型中，元素的宽度 没有包含填充或边框。例如:
    #foo { width: 10em; padding: 2em; border: 1em; }
    将实际上是 16em宽: 10em + 2em填充为每一边，+ 1em边界为每一边。

如果您使用带有 有效标记、 文件类型不错和 适当的标题的 IE 的现代版本，它将遵循标准。否则，您可以通过以下方式强制现代标准兼容的浏览器使用“边框”:

* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

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

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

请注意，Webkit (Safari 和 Chrome)不支持任何声明的 padding-box box 模型。

小开

是否声明了 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>
小开

我偶然发现了这个问题，虽然它已经有几年的历史了，但我还是想加上这个，以防有人碰到这个问题。

CSS3现在有了一个盒子大小属性,

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

你的类将是1000px 宽，而不是1030px。当然，对于那些使用像素大小的边框和液体 div 的人来说，这是非常有用的，因为它解决了一个难以解决的问题。

更好的是，除了 IE7以下的浏览器，所有主流浏览器都支持框大小。若要 包括宽度或高度维度内的所有项目，请将框大小设置为边框。将其他项目设置为宽度和/或高度(这是默认值)时，可以将框大小设置为“ content-box”。

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

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

对于那些仍然有问题的人，JQuery提供了两个属性 outerWidth ()和 innerWitdh ()知道一个物体的 宽度有或没有边界..。


提交答案