Chrome と Firefox でパーセンテージ値と「自動」値のレンダリングの高さが異なるのはなぜですか?

Chrome と Firefox で異なる高さのレンダリング

CSS で、親要素の高さを指定せずにブロックレベル要素の高さをパーセントまたは「自動」に設定するブラウザーごとに高さの計算が異なる可能性があります。たとえば、Chrome と Firefox は異なる動作を示します。

「高さ: 1%」が自動で計算される理由

高さ: 1% の例では、Chrome は div の高さを次のように計算します。 margin-bottom に p 要素のコンテンツの高さを加えたもの。これは、CSS 仕様によれば、親の高さが明示的に設定されておらず、要素が絶対的に配置されていない場合、「自動」がパーセントで計算されるためです。

親の Flex Height

Another Chrome と Firefox の相違点は、フレックスボックスの高さのパーセンテージの処理です。 Chrome と Safari は親のフレックス高さを優先しますが、Firefox と IE11/Edge は親の全体の高さを優先します。

ブラウザの解釈

高さのパーセンテージに関する CSS 仕様の文言はやや曖昧で、解釈の余地が残されています。ブラウザメーカーによる。従来の解釈では、親の高さの値を設定する必要があり、Chrome や Safari などのブラウザーがそれに続きます。ただし、Firefox と IE では、この解釈が拡張され、フレックスの高さが含まれるようになりました。

代替ソリューション

ブラウザ間で一貫した高さのレンダリングを確保するには、次の代替案を検討してください。

• 使用display: 親で flex し、align-items: 子でストレッチして、子の高さを完全な親に設定しますheight.
• 子に高さ: 100%、幅: 100% で位置: 絶対を適用し、親では位置: 相対を設定します。

以上がChrome と Firefox でパーセンテージ値と「自動」値のレンダリングの高さが異なるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。