[解決済み] IE7はdisplay: inline-blockを理解しない。

質問

このバグについて、どなたか教えていただけないでしょうか。Firefoxでは問題なく動作していますが、Internet Explorer 7ではそうではありません。それは display: inline-block; .

htmlです。

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

cssを使用します。

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

どのように解決するのですか？

IE7 の display: inline-block; のハックは以下の通りです。

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

デフォルトでは、IE7 は inline-block をサポートし、当然 inline 要素 ( Quirksmode 互換性テーブル というように、他の要素ではこのハックが必要なだけです。

zoom: 1 があるのは hasLayout の挙動を制御するために スタープロパティハック を設定するために display を inline は、IE7以下でのみ適用されます（新しいブラウザでは適用されません）。 hasLayout と inline を併用すると、基本的に inline-block の挙動を引き起こすので、私たちは満足しています。

この CSS は検証されず、スタイルシートがめちゃくちゃになる可能性があるので、IE7 専用のスタイルシートを使って 条件付きコメント を使うのは良いアイデアかもしれません。

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