「自動」または高さのパーセンテージを使用すると、Chrome と Firefox でレンダリングされる高さが異なるのはなぜですか?

Chrome と Firefox でレンダリングの高さが異なる: 原因を理解する

CSS レンダリングの領域では、ブラウザ間の微妙な違いが問題を引き起こす可能性があります。このような矛盾の 1 つは、親の高さを明示的に設定せずに、ブロック要素の高さを「自動」またはパーセンテージに設定した場合に発生します。この動作は、ブロックレベルの子要素に下マージンがある場合に特に顕著です。 Chrome は子の余白とコンテンツに基づいて計算された高さを扱いますが、Firefox は関係なく同じ高さの値を表示します。

CSS 仕様の詳細

管理団体 W3C Web サイト標準では、含まれるブロックの高さが明示的に設定されていない場合に「auto」として計算される「height」プロパティを定義します。さらに、ブロックレベル要素の「自動」高さは、ブロックレベルの子の存在と、パディングまたはボーダーが存在するかどうかによって決まります。この定義はあいまいなままであり、解釈の余地があります。

ブラウザの違いが現れる

標準化の取り組みにもかかわらず、ブラウザはパーセンテージの高さの動作方法についてさまざまな解釈を示しています。親の高さの指定に対する Chrome のこだわりは、高さプロパティを優先するという仕様の従来の理解と一致しています。ただし、Mozilla のエンジンは、アクセシビリティを促進するという使命に沿って、Flexbox の高さを含めるように解釈を拡大しました。

代替ソリューション

これらの矛盾を認識し、開発者は高さのパーセンテージについては、代替ソリューションを検討する必要があります。 「align-items:stretch」を使用して親に「display:flex」をデプロイすると、子が親の最大の高さまで拡張されるようになります。あるいは、親に「位置: 相対」を指定し、子に「位置: 絶対; 高さ: 100%; 幅: 100%」を指定しても、同じ効果が得られます。

要約すると、全体の高さのパーセンテージのさまざまな動作が異なります。 Chrome と Firefox は、仕様の解釈が本質的に難しく、曖昧さの余地があることを反映しています。 W3C が最新の CSS 技術を考慮してこれらの仕様を修正するまで、開発者はブラウザーの違いを慎重に把握し、デザインの一貫したレンダリングを確保するための代替ソリューションを検討する必要があります。

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