CSS的宽度是否包含填充？

146

似乎在IE中，宽度包括填充大小。而在FF中，宽度没有。如何使两者的行为相同？

谢谢。

css

— 杰克
source

您可能需要激活符合标准的模式。但是，如果没有看到一些代码，我将为您提供更多指导。

— 杰夫·哈伯德

307

IE曾经使用更方便但非标准的“边框”框模型。在此模型中，元素的宽度包括填充和边框。例如：
#foo { width: 10em; padding: 2em; border: 1em; }
会很10em宽。
相反，所有违反标准的浏览器默认使用“内容框”框模型。在此模型中，元素的宽度不包括填充或边框。例如：
#foo { width: 10em; padding: 2em; border: 1em; }
实际上会16em很宽：10em+ 2em每边填充，+ 1em每边边框。

如果您使用具有有效标记，良好doctype和适当标题的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通过任何声明支持盒子模型。

— 佛罗兹
source

2

+1表示内容框和边框框模型。可能想详细说明差异。

— BoltClock

1

@BoltClock感谢您提供更严格的答案的动力。更新。

— Phrogz 2011年

好的答案；我一直想着记住（或找到）几天以来不同选项的名称了……+1 =）

— 大卫说，请恢复莫妮卡（Monica）

没有人在乎歌剧。

— Michael J. Calkins，2015年

3

@whitelettersinblankpapers了解W3Schools为何会失败，然后提供更好的参考，从而使您熟悉W3C标准。不要再链接到W3Schools。此外，将来还会在搜索引擎查询中添加有关网络标准的“ MDN”。

— Phrogz 2015年

27

一个简单的规则是尝试避免对同一元素使用padding / margin和width属性。即使用类似的东西

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

— 山汗
source

我定期使用此方法，并且从未遇到跨浏览器问题。

— 凯文·比尔2012年

20

我碰到了这个问题，尽管它已经存在了两年，但我想如果有人碰到这个线程，我可能会添加这个问题。

CSS3现在具有box-sizing属性。如果您设定，说，

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

您的班级将是1000px宽，而不是1030px。当然，这对于使用像素大小的边框和液体div的人非常有用，因为它解决了原本无法解决的问题。

更好的是，除IE7及更低版本外，所有主流浏览器均支持box-sizing。要包括宽度或高度尺寸内的所有项目，请将box-sizing设置为border-box。要将其他项目聚合为默认的宽度和/或高度，您可以将box-sizing设置为“ content-box”。

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

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

— 梅森驳船
source

是的，保罗·爱尔兰（Paul Irish）在这里有一篇不错的博客文章：paulirish.com/2012/box-sizing-border-box-ftw

— Dave Burton

与3年前被接受的答案相同时，该答案有这么多的赞誉？

— dippas

1

您是否声明了文档类型？当我开始编码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>

— tybro0103
source

1

对于那些仍然会遇到问题的人，jQuery提供了两个属性outerWidth ()，innerWitdh ()可以知道带有或不带有边框的对象的宽度 ...

— 帕特里克
source