Internet Explorer 6 および 7 で「display: inline-block」を正しく動作させるにはどうすればよいですか?

Internet Explorer 6 および 7 におけるインライン ブロックのジレンマ

インライン ブロックは広く受け入れられているにもかかわらず、Internet Explorer では適切に動作しません。 6 と 7. この癖により、ページにインライン ブロックを効果的に使用する作業が妨げられる可能性があります。 layouts.

この動作の理由は、IE6/IE7 では、inline-block がスパンなどの本質的にインライン要素でのみ正しく機能するという事実にあります。 div などの要素に範囲を拡張するには、回避策が必要です。

課題を克服する

inline-block を div や他のブロックレベルの要素で動作させるにはIE6/IE7 の場合は、次の CSS スニペットを使用します:

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

Breaking解決策の詳細

1. display: inline-block: インラインブロックの動作を宣言します。
2. *display: inline: IE7 以下をターゲットとする「安全な」CSS ハック、インライン化を強制する動作。
3. zoom: 1: ブロックレベル要素の「レイアウト」を提供します。これは、IE6/IE7 でインラインブロックが機能するために重要です。

追加情報

これを適用する際に有効な CSS を実現することは可能ですが、回避策は、特にベンダープレフィックス付きプロパティが他の場所で使用されている場合には現実的ではありません。

display: inline-block のより包括的な理解については、関連するリソースを参照してください。ただし、-moz-inline-stack のみが適用されます。 Firefox 2 へ。

以上がInternet Explorer 6 および 7 で「display: inline-block」を正しく動作させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。