在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的总宽度为1000px，就像他的父级一样，内部有10px填充。但上面的代码只适用于safari和ie和firefox和opera，它的总宽度将达到1020px。

Answer 1

听起来你正在观察的行为是由于W3C盒子模型和“传统”盒子模型之间的区别。 Quirksmode.org很好地描述了两者之间的区别：

  

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

如果#container的固定宽度始终为1000px，则只需将#content的宽度从100％更改为980px。

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