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

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

質問:

ブロックレベル要素の高さをパーセンテージに設定する場合(例: 1%) 親の高さを明示的に設定せずに、なぜ Chrome と Firefox がChrome では子の下マージンが考慮されますが、Firefox では高さが異なりますか?

答え:

CSS 標準では、含まれるブロックの高さが明示的に指定されていない場合、高さのパーセンテージは「auto」に計算されます。

ただし、さまざまなブラウザがこの規定を実装しています。別の方法:

• Webkit ブラウザ (Chrome、Safari) は従来の解釈に従い、インフローの子で機能するパーセンテージの高さの設定された高さを親に要求します。
• Firefox と IE は、フレックスの高さを次のように受け入れるように解釈を拡大しました。

この仕様からの逸脱により、一部のブラウザではフレックス高さを使用し、他のブラウザでは設定された親の高さを必要とするため、レンダリングの不一致が発生しました。

代替解決策:

すべてのブラウザで一貫したレンダリングを確保するには、次のいずれかの使用を検討してください。代替案:

• 親のディスプレイを「flex」に設定し、align-items:stretch を使用して子の全高を自動的に有効にします。
• 位置を使用: 親要素と子要素の : 絶対値と位置: 相対。子の高さは 100% です。幅: 100%。これにより、親の高さが指定されていない場合でも、子要素に対して高さのパーセンテージを適用できるようになります。

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