Chrome と Firefox でレンダリングされるブロック要素の高さが異なるのはなぜですか?

Chrome と Firefox での高さのレンダリングの違い

親の高さプロパティを明示的に指定せずに、ブロックレベル要素の高さを自動または 0 ～ 100% に設定する場合、 Chrome で計算された高さは、特に要素に下マージンがある場合、Firefox とは異なる場合があります。

なぜ違い?

W3C CSS2.1 仕様では、含まれるブロックの高さが明示的に指定されていない場合、高さ: 1% は自動で計算される必要があると規定されています。ただし、Chrome はより伝統的な解釈に従い、子要素で高さのパーセンテージを機能させるには、親の高さプロパティを設定する必要があります。

一方、Firefox と IE は最近、フレックスを受け入れるように解釈を拡大しました。高さの割合の参考としての高さ。従来の解釈からのこの逸脱により、ブラウザーでのレンダリングの違いが生じています。

代替ソリューション

Chrome と Firefox の両方で望ましい動作を実現するには、次の代替案を検討してください。

• 表示: flex を親に適用し、align-items: ストレッチを設定して、子を親のフルサイズまで強制的に展開しますheight.
• 親の位置: 相対と位置: 絶対を使用します。高さ: 100%; width: 子では 100%。このメソッドは、Chrome の高さのパーセンテージの問題をオーバーライドします。

以上がChrome と Firefox でレンダリングされるブロック要素の高さが異なるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。