Internet Explorer 6 および 7 でインライン ブロックが機能しないのはなぜですか?それを修正するにはどうすればよいですか?

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

CSS のインライン ブロックの概念により、要素はインラインとブロックの両方として動作できます。 -level 要素を同時に実行します。ただし、Internet Explorer 6 および 7 でインライン ブロックが機能しないという問題が発生しているのは、あなただけではありません。

問題:

デフォルトでは、 inline-block は、スパンなどの本質的にインライン要素に対してのみ機能します。 IE6 や IE7 の div などの他の要素に適用すると、予期しない動作が発生する可能性があります。

解決策:

この問題を解決し、非IE6/7 でインライン要素を使用するには、回避策を採用する必要があります。これには、次の CSS を追加する必要があります:

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

回避策の内訳は次のとおりです:

• *display: inline は、IE7 以前をターゲットとする「安全な」CSS ハックです。これは、inline-block によって設定された表示プロパティをオーバーライドします。
• zoom: 1 は、IE6/7 に強制的に「レイアウト」を要素に適用します。インラインブロックが一貫して動作するには、レイアウトが不可欠です。

追加の考慮事項:

有効な CSS を維持しながらこの回避策を実装することは可能ですが、一般的には実装されません。特に他のベンダー固有のプレフィックスをすでに使用している場合には推奨されます。

詳細については、 display: inline-block、外部リソースを参照してください。ただし、-moz-inline-stack は Firefox 2 にのみ適用されるため不要であることに注意してください。

以上がInternet Explorer 6 および 7 でインライン ブロックが機能しないのはなぜですか?それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。