IE7 が「inline-block」CSS プロパティを誤って解釈するのはなぜですか?それを修正するにはどうすればよいですか?

IE7 の inline-block の誤解: トラブルシューティング ガイド

Internet Explorer 7 (IE7) は、CSS 表示に関して独特の課題を抱えていますプロパティ。そのような例の 1 つは、inline-block プロパティを正しく解釈できないことです。

問題のコード

次の HTML および CSS コードを考えてみましょう:

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

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

IE7不正動作

何らかの理由で、IE7 はインライン ブロック スタイルの適用に失敗し、目的のレイアウトが損なわれます。

IE7 ハック

この問題を解決するには、カスタム CSS ハックが必要です。 IE7:

.frame-header {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

デフォルトでは、IE7 は本質的にインライン要素に対してのみインラインブロックを認識します。このハックは、その制限を回避します。

• display: inline: display: inline-block を上書きし、IE7 との互換性を確保します。
• zoom: 1: トリガーの hasLayout 動作は、インラインブロックを実現するために不可欠です
• スター プロパティ ハック: 表示の適用を制限します: インラインで IE7 以前のブラウザーに限定します。

条件付きスタイルシート

最適なパフォーマンスと検証を確保するには、条件付きスタイルシートを使用して具体的には IE7 をターゲットにします:

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

「ie7.css」ファイルに、IE7 のレンダリングの問題に対処するカスタム CSS ハックを含めることができます。このアプローチにより、コードの複雑さが最小限に抑えられ、より高いレベルの検証が維持されます。

以上がIE7 が「inline-block」CSS プロパティを誤って解釈するのはなぜですか?それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。