小粋空間  -  a cheap joke and a play on words site

IE7 で pre 要素が適正に表示されない不具合を修正

当サイトでは、ソースコード等を pre 要素（+code 要素）で表示していますが、「1行だけのソースコードを表示している場合、IE7では適正に表示されません」というご指摘をいただきましたので修正致しました。

１．問題点

pre 要素で1行だけのソースコードを表示していると、IE7 では次のような表示になります。

IE7

２．原因

そもそも、IE6 以外のモダンブラウザで、「overflow: scroll;」指定を行なうと、下に冗長な空白が表示されます。これを避けるために、IE6 以外のモダンブラウザに対し、CSS ハックを利用して「overflow: auto;」を設定しているのですが、IE7 に「overflow: auto;」を適用されると、１項の問題が発生します。

pre {
    overflow: scroll;
}
html > body pre {
    overflow: auto;
}

３．対策

IE7 の CSS ハックを利用して、IE7 のみ「overflow: scroll;」でさらに上書きします（青色部分）。

pre {
    overflow: scroll;
}
html > body pre {
    overflow: auto;
}
*:first-child+html pre {
    overflow: scroll;
}

とりあえず現在は上記の設定にしています。以下、各ブラウザでの表示を確認しました。

IE6

IE7

Firefox

Opera

Safari

Google Chrome

より良い方法があればご教示ください。

４．参考サイト

下記です。ありがとうございました。

サラリーマン白書 - IE7をインストールしてみた