IE6 および IE7 で「display: inline-block」が壊れるのはなぜですか? どうすれば修正できますか?

Internet Explorer 6 および 7 のインライン ブロックの互換性の問題

CSS プロパティ「display: inline-block」は広く使用されているにもかかわらず、 Internet Explorer の古いバージョンには既知の互換性の問題があります。具体的には、IE6 および IE7 では期待どおりに動作しません。

IE6/IE7 の Inline-Block に関する問題

IE6 および IE7 では、「display: inline-block」 " は、スパンなど、本来インラインである要素でのみ適切に機能します。 div などのブロック レベルの要素にこれを適用すると、予期しない動作が発生します。

IE6/IE7 の回避策

IE6 および IE7 でこれらの問題を解決するには、具体的な回避策は次のとおりです。必要:

#yourElement {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

「*display: inline」擬似クラスはIE7 以前のみを対象とする CSS ハック。 「zoom: 1」プロパティは、IE6 および IE7 に要素を「レイアウト」があるものとして認識させます。これは、「display: inline-block」が正しく機能するために必要です。

補足事項

技術的には可能ですが、ベンダープレフィックス付きのプロパティを使用しながら、この回避策を有効な CSS に維持しようとすることはお勧めできません。 「display: inline-block」とその互換性の問題を包括的に理解するには、提供された回答内のリンクされたリソースを参照してください。

以上がIE6 および IE7 で「display: inline-block」が壊れるのはなぜですか? どうすれば修正できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。