如何确保跨浏览器的元素宽度一致？

元素宽度和box-sizing：**统一浏览器行为

在网页设计中，元素的宽度可以成为由于不同浏览器的不同解释而造成混乱。例如，Internet Explorer 和 Firefox 在历史上对这方面的处理方式有所不同。

IE 的 Border-Box 模型与 FF 的 Content-Box 模型

传统上，Internet Explorer 采用“border-box”模型，其中元素宽度包括填充和边框。因此：

foo {

宽度：10em;
填充：2em;
边框：1em;
}

将渲染一个 10em 宽的元素。

相比之下， Firefox 和其他符合标准的浏览器默认采用“内容框”模型。这里，元素宽度不包括填充和边框。因此，相同的 CSS 将导致元素宽度为 16em：

foo {

width: 10em;
padding: 2em;
border: 1em;
}

实现一致性

为了协调跨浏览器的行为，开发人员可以使用 box-sizing 属性。通过将其设置为“border-box”：

• {
  box-sizing： border-box;

或：<br>*{

box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box

}

符合现代标准的浏览器，包括 Firefox ，可以强制采用“border-box”模型。此声明还支持 Opera 和基于 Webkit 的浏览器，例如 Chrome。

但是，请注意，Webkit 不通过任何声明支持“padding-box”模型。

以上是如何确保跨浏览器的元素宽度一致？的详细内容。更多信息请关注PHP中文网其他相关文章！