Firefox と Chrome 48 で Flexbox 要素のレンダリングに一貫性がないのはなぜですか?

Firefox および Chrome の Flexbox でのクロスブラウザー レンダリングの問題 48

背景

Aフレックスボックス仕様の最近の更新により、コンテンツ サイズと一致するようにフレックス項目のデフォルトの最小サイズが変更されました。 Chrome 47 ではこの変更が正しく実装されましたが、Chrome 48 と Firefox ではフレックスボックス要素のレンダリングに問題が発生しました。

問題

Firefox では、コンテンツがあふれる特定のフレックスボックス要素が発生します。予期せぬ行動をする。 Chrome 47 ではこれらの要素が正しくレンダリングされましたが、Chrome 48 では Firefox の動作と一致するようになりました。

解決策

この問題に対処するには、これらの要素のデフォルトの最小サイズを明示的にオーバーライドできます。次の CSS プロパティを使用します:

.content {
    min-width: 0;
    min-height: 0;
}

これにより、フレックスボックス要素がコンテンツに合わせて正しく縮小され、レンダリングの問題が解決されます。

仕様の詳細

フレックスボックスの仕様には次のように記載されています:

「フレックス項目のより合理的なデフォルトの最小サイズを提供するために、この仕様では min-width プロパティと min-height プロパティの初期値として新しい auto 値を導入します。 CSS 2.1 で定義されています。"

Chrome 48 への影響

観察によると、Chrome 48 のフレックスボックス アップデートの初期実装では Firefox の動作がエミュレートされ、同様のレンダリングの問題が発生しました。 。ただし、その後のレポートでは、Chrome 48 が上記の解決策に一致するようにレンダリング動作を更新したことが示されています。

結論

フレックス項目の最小サイズを明示的に 0 に設定することで、両方向で、Firefox と Chrome 48 でオーバーフローしたコンテンツを処理するときに発生するレンダリングの問題を効果的に解決できます。

以上がFirefox と Chrome 48 で Flexbox 要素のレンダリングに一貫性がないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。