エントリー本文
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エンジンのブラウザで見てたので案外これ困ってたんですよねー
IE8での例が無いのでIE8では未確認と思いますんで、IE8製品版(XP)での標準モードと互換モードでの確認のお手伝いをしたいです。
この記事の例の表示部分は画像のようですが、該当する記事があれば覚えている範囲で教えて頂けないでしょうか。
既にIE8で確認済みでしたら構いません。
: March 30, 2009 6:34 AM別の記事にコメントしたようです。
http://www.koikikukan.com/archives/2009/03/22-005555.php
にて確認しました。
(1行の要素があるようですが勘違いかも)
IE8通常/互換モード共に大丈夫のようです。
: March 30, 2009 8:24 AM＞ちはさん
こんにちは。
お手伝いのお申し出、ありがとうございます。
当方、まだIE8の環境にしていないので、また気がついた時点で適宜ご連絡いただければ幸いです。
別記事に投稿されたコメントは先ほど削除しました。
それではよろしくお願いいたします。
: March 30, 2009 1:37 PM
