[CSS] IEでpre要素内に記述した内容が見づらいのを防ぐ

ブログ等にソースコードを掲載する場合には、一般的に pre要素 でソースコードを囲むが、
style に overflow:auto; を指定することで、IE ではスクロールバーが表示されるなどして見づらくなってしまう。
これを防ぐため、CSS に以下を記述する。

pre {
overflow:auto;
_width:90%;/* for IE4 - IE6 */
overflow-y:hidden;
*padding-bottom:25px;/* for IE? - IE7 */
}

1行目は IE6 特有の pre要素 の右側が欠ける問題への対応で、プロパティの頭にアンダースコア付加することにより、このプロパティが IE4 - IE6 のみに適用されるように制限している。
2行目は IE の pre要素 に表示される垂直スクロールバーを非表示にしている。
3行目は水平スクロールバーの表示領域を確保するもので、プロパティの頭にアスタリスクを付加することにより、このプロパティが IE のみに適用されるように制限している。
(IE が不正な文字を無視してプロパティを有効にする動作を利用した Hack の一種)

投稿日付 :

カテゴリー : CSS

トラックバックURL

http://mashimonator.weblike.jp/mt/mt-tb.cgi/15

コメント投稿フォーム