CSS的宽度是否包括填充?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (26)

在IE中,宽度包括填充尺寸。而在FF中,宽度不包括。我怎么才能让两者的行为一致呢?

谢谢

提问于
用户回答回答于
  • IE used to use the more-convenient-but-non-standard “边框”盒子模型。在该模型中,元素的宽度包括填充和边框。例如:#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。

注意Webkit(Safari和Chrome)不支持padding-box通过任何声明的盒子模型。

用户回答回答于

一个简单的规则是尽量避免对相同的元素使用填充/边距和宽度属性。

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

扫码关注云+社区