在 Mozilla firefox 和 safari 中填充

Question

据我所知，我认为标准的内边距总是加起来等于您在 css 中指定的宽度，例如：

.content{
  width:100px;
  padding:10px;
}

<div class="content"></div>

这个 div 的实际宽度为 120px。本标准适用于 IE Firefox Opera 浏览器。 问题是在 safari 中不一样，这个 div 的总宽度为 100px，内部填充为 10px。

这是我需要解决的情况：

.container{
  width:1000px;
}

.content{
  width:100%;
  padding:10px;
}

<div class="container">
     <div class="content"></div>
</div>

我需要内容 div 的总宽度像他的父级一样为 1000 像素，并且内部有 10 像素的填充。但是上面的代码只在 safari 和 ie 和 firefox 和 opera 中有效，它会变成 1020px 的整体宽度。

Answer 1

听起来您所观察到的行为是由于 W3C 盒子模型和“传统”盒子模型之间的差异造成的。 Quirksmode.org很好的说明了两者的区别：

1. 在 W3C 盒子模型中，元素的 width 给出了元素的宽度 框的内容，不包括填充 和边框。
2. 在传统的盒子模型中，元素的width 给出了 框边框之间的宽度， 包括内边距和边框。

如果#container 将始终具有 1000 像素的固定宽度，只需将 #content 的宽度从 100% 更改为 980 像素。

请注意，为了确保所有浏览器都是 W3C 的盒子模型，您需要指定一个valid DOCTYPE。否则，IE 和 Opera 将恢复为“传统”（或“Quirks”）框模型。