Flexbox を複数のブラウザ、特に Internet Explorer 11 で一貫して動作させるにはどうすればよいですか?-CSSチュートリアル-php.cn

Flexbox を複数のブラウザ、特に Internet Explorer 11 で一貫して動作させるにはどうすればよいですか?

Susan Sarandon

リリース： 2024-11-28 20:11:12

オリジナル

692 人が閲覧しました

How Can I Make Flexbox Work Consistently Across Browsers, Especially Internet Explorer 11?

Internet Explorer 11 のフレックスボックス互換性の謎

CSS フレックスボックスの領域を深く掘り下げると、サポート状況は少し予測不可能になることがあります。主要なブラウザは一般に問題なく動作しますが、Internet Explorer 11 (IE11) にはいくつかの特有の課題があります。

IE11 とスティッキーフッターの難問

" の "スティッキーフッター" の例Flexbox で解決しました」は IE11 では失敗します。謎めいた解決策の 1 つは、に display:flex を散りばめることです。

のタグと width:100%タグ。この魔法の杖の背後にあるロジックは、IE11 の flex プロパティの非標準デフォルト値に基づいています。他のブラウザはドラフト仕様の 0 1 auto に準拠していますが、IE11 は 0 0 auto を主張しています。これらの値を明示的に設定することで (例: flex: 1 0 0)、IE11 をより適切に調整することができます。

IE11 でのメディアオブジェクトの調整

「メディア」 Object」の例も、IE11 にとって課題となります。残念ながら、普遍的にクリーンな解決策は存在していないようです。次のようなブラウザ固有のハックである程度成功する可能性があります。

@-moz-document url-prefix() {
  #flexible-content {
    flex: 1;
  }
}

ログイン後にコピー

このハックは Mozilla をターゲットにしており、flex プロパティをオーバーライドして、目的の動作を復元します。ただし、このようなハッキングは他のブラウザに予期せぬ結果をもたらす可能性があることに注意してください。

フレックスボックスはまだ進化しており、ブラウザの不一致は状況の一部であることを忘れないでください。幸いなことに、状況は改善されつつあり、少しの忍耐と創意工夫があれば、これらの課題を乗り越え、Web デザインでフレックスボックスの力を活用することができます。

以上がFlexbox を複数のブラウザ、特に Internet Explorer 11 で一貫して動作させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。