パディングを含む HTML 要素の幅の計算方法がブラウザによって異なるのはなぜですか?

質問: ブラウザー間での要素の幅の計算の違い

Web ブラウザーが異なると、HTML 要素の幅の計算方法に差異があります。パディングに関して計算されます。 Internet Explorer では、パディングは幅の測定に含まれますが、Firefox では含まれません。

ボックス モデルについて

この動作を理解するには、次のことを知る必要があります。 CSSのボックスモデルについて。 HTML の各要素には、次の 4 つの部分からなるボックスが割り当てられます。

• コンテンツ領域: 要素の実際のコンテンツが含まれます。
• パディング: コンテンツの周囲のスペース。
• ボーダー: パディングの周囲の線。
• マージン: 外側のスペースborder.

標準の「コンテンツ ボックス」モデル

Firefox を含むほとんどの最新のブラウザは、標準の「コンテンツ ボックス」モデルを使用します。このモデルでは、要素の幅にはパディングと境界線を除いたコンテンツ領域のみが含まれます。

非標準の「ボーダーボックス」モデル

Internet Explorer、古いバージョンでは、非標準の「ボーダーボックス」モデルが使用されていました。このモデルでは、要素の幅にパディングとボーダーが含まれているため、要素が大きく見えます。

ブラウザの一貫性を保つ

ブラウザ間で動作を一貫させるには、次のようにします。ボックスのサイズ設定プロパティを使用できます。このプロパティを使用すると、ブラウザがどのボックス モデルを使用するかを指定できます。

* {
  box-sizing: border-box;
}

box-sizing を border-box に設定すると、幅にパディングとボーダーが含まれるこのモデルをすべてのブラウザで使用するように強制されます。これにより、要素は Internet Explorer と Firefox の両方で同じサイズで表示されます。

追加の注意:

• Opera では、ボックス サイズ変更をサポートするには特定の宣言が必要です。 : border-box.
• WebKit ブラウザ (Safari および Chrome) はパディングボックス ボックスをサポートしていませんmodel.
• IE のレガシー バージョンでは、標準ボックス モデルに準拠するために有効な doctype と適切なヘッダーが必要な場合があります。

以上がパディングを含む HTML 要素の幅の計算方法がブラウザによって異なるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。