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

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

Posted at March 29,2009 1:54 AM
Tag:[CSS, CSSHack, IE7]

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

1.問題点

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

IE7
IE7(対処前)

2.原因

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

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

3.対策

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

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

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

IE6
IE6(対処後)

IE7
IE7(対処後)

Firefox
Firefox(対処後)

Opera
Opera(対処後)

Safari
Safari(対処後)

Google Chrome
Google Chrome(対処後)

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

4.参考サイト

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

サラリーマン白書 - IE7をインストールしてみた
関連記事
zenback
人気エントリー
トラックバックURL


コメント

IE7エンジンのブラウザで見てたので案外これ困ってたんですよねー


IE8での例が無いのでIE8では未確認と思いますんで、IE8製品版(XP)での標準モードと互換モードでの確認のお手伝いをしたいです。
この記事の例の表示部分は画像のようですが、該当する記事があれば覚えている範囲で教えて頂けないでしょうか。

既にIE8で確認済みでしたら構いません。

[1] Posted by ちは logo : March 30, 2009 6:34 AM

別の記事にコメントしたようです。

http://www.koikikukan.com/archives/2009/03/22-005555.php
にて確認しました。
(1行の要素があるようですが勘違いかも)

IE8通常/互換モード共に大丈夫のようです。

[2] Posted by ちは logo : March 30, 2009 8:24 AM

>ちはさん
こんにちは。
お手伝いのお申し出、ありがとうございます。
当方、まだIE8の環境にしていないので、また気がついた時点で適宜ご連絡いただければ幸いです。
別記事に投稿されたコメントは先ほど削除しました。
それではよろしくお願いいたします。

[3] Posted by yujiro logo : March 30, 2009 1:37 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)