Internet Explorer 7 で「display: inline-block」が機能しないのはなぜですか?それを修正するにはどうすればよいですか?

IE7 ディスプレイ: インライン ブロックの不適格

Internet Explorer 7 でディスプレイ: インライン ブロックの問題が発生しましたか?あなたは一人ではありません。このプロパティは Firefox では問題なく機能しますが、IE7 はその存在に気づいていないように見えます。

問題:

提供された HTML と CSS:

<div class="frame-header">
    <h2>...</h2>
</div>

.frame-header {
    height: 25px;
    display: inline-block;
}

IE7 の「frame-header」要素は、 inline-block により、目的のレイアウト出力が妨げられます。

解決策:

この IE7 の癖に対処するには、次の表示を使用します: inline-block hack:

display: inline-block;
*display: inline;
zoom: 1;

説明:

IE7 の展示inline-block のサポートは制限されており、自然にインライン要素内でのみ認識されます。このカテゴリ以外の要素 (例の「frame-header」など) の場合、次のハック手順により、

• *display: inline; は、特に IE7 以前に対してインライン動作を強制します。
• zoom: 1; は、インラインブロックの重要なプロパティである hasLayout をトリガーします

考慮事項:

この CSS は検証基準を満たしておらず、他のスタイルを混乱させる可能性があります。したがって、条件付きコメントによって実装された IE7 専用スタイルシートの使用を検討してください:

<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]-->

この対象を絞ったスタイルシートを組み込むことで、CSS 全体の整合性を損なうことなく、IE7 の表示: インライン ブロックの問題に対処できます。

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