如何確保跨瀏覽器的元素寬度一致？

元素寬度和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;
padding: 2em;

border: 1em;

padding: 2em; border: 1em; padding: 2em;

border: 1em;}

實現一致性

• 為了協調跨瀏覽器的行為，開發人員可以使用
  box-sizing
屬性。將其設定為「border-box」：

<br>{

box-sizing： border-box;

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

或：

*{

}符合現代標準的瀏覽器，包括Firefox ，可以強制採用「border-box」模型。此聲明還支援 Opera 和基於 Webkit 的瀏覽器，例如 Chrome。 但是，請注意，Webkit 不透過任何聲明支援「padding-box」模型。

以上是如何確保跨瀏覽器的元素寬度一致？的詳細內容。更多資訊請關注PHP中文網其他相關文章！