Firefox と Edge で Flex アイテムのパディングとマージンの割合が異なるのはなぜですか?

Firefox と Edge におけるパーセンテージ パディングとマージンの謎を明らかにする

フレックス項目の領域における、パーセンテージ パディングとマージンの物語Firefox と Edge を使用する開発者を当惑させています。 Chrome は問題なく動作しますが、これらのブラウザは、頭を悩ませるような独特の動作を示します。

フレックスボックスの仕様によると、フレックス項目のパディングやマージンの割合に関しては、少々予測が難しい場合があります。問題の根本は次のとおりです:

複数のマージン/パディング解決メカニズム:

フレックスボックスの仕様では、次のディメンションでパーセンテージを計算するときに 2 つの解釈が可能です:

1. 軸ベースの解像度:パーセンテージはアイテム自体の軸を基準に計算されます (例: 幅は左/右、高さは上/下)。
2. インライン軸解像度: すべてのパーセンテージはアイテムの軸を基準に計算されます。インライン軸 (つまり、幅)。

Firefox と Edge は両方とも異なるアプローチを採用しているため、彼らの行動の矛盾。この変動はブラウザの解決メカニズムの選択に起因し、次のようになります。

Firefox の解釈:

• パディングとマージンのパーセンテージは、インライン軸。横書きと縦書きの両方で常に幅になります。 modes.

Edge の解釈:

• Firefox はまだ最新のフレックスボックス仕様に更新されていないため、古いフレックスボックス仕様に従います。

解決策:

すべてのブラウザーで一貫した動作を確保するには、フレックス項目でパーセンテージのパディングとマージンを使用することを完全に避けてください。この重要なアドバイスに従うことで、コードに悪影響を与える可能性があるブラウザ間の不整合を避けることができます。

以上がFirefox と Edge で Flex アイテムのパディングとマージンの割合が異なるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。