Chrome と Firefox では、高さのパーセンテージによるブロックレベル要素の高さの計算が異なるのはなぜですか?

高さに関する Chrome と Firefox のレンダリングの違い

問題

ブロックレベル要素の高さを「自動」または「0~100%」に設定する」 親の高さを明示的に指定せずに実行すると、Chrome と Firefox で異なる高さの計算が行われます。 「高さ: 1%」の場合、Chrome は下マージンにコンテンツの高さを加えたものとして高さを計算しますが、Firefox は計算しません。この動作は、親の高さが明示的に設定されていない場合は「高さ: 1%」を「自動」として計算する必要があると規定されている CSS 仕様にもかかわらず異なります。

原因

W3C は、ブラウザー、ブラウザーのメーカーは、これらの標準をさまざまな方法で実装する自由を持っています。この場合、Chrome と Firefox では、「高さ」プロパティの解釈が異なります。

Chrome は、より伝統的な仕様の解釈に従い、子要素で高さのパーセンテージを機能させるには、親で高さを設定する必要があります。 Firefox と IE は最近、フレックスの高さも受け入れるように解釈を広げました。

代替ソリューション

この不一致に対処するには、次のいずれかの代替手段の使用を検討してください:

• Display Flex: 親に「display: flex」を設定します。これにより、自動的に設定されます。 「align-items:stretch」し、子を親の高さ全体に拡張します。
• Absolute Positioning: 親に「position:relative」を設定し、「position:absolute;height」を設定します。 : 100%; 幅: 100%」を子に適用します。これにより、親の高さを指定せずにパーセンテージの高さを使用できるようになります。

以上がChrome と Firefox では、高さのパーセンテージによるブロックレベル要素の高さの計算が異なるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。