個別記事

前後の記事

pre要素にoverflow

この記事が属するカテゴリー
CSS

htmlやCSSのコードを紹介するときにpre要素を使っています。横に長いコードの場合は、overflow: auto;と指定し、スクロールバーが表示されるようにしているのすが、IEの場合pre要素の幅を指定してあげないと、バーが表示されずpre要素内の中身いっぱい横に伸びて表示されてしまいます。そこで、IE5.5以降では認識できない子セレクタを使って解決します。

.content pre {
        margin: 10px;
        background-color: #FFFFFF;
        border: 1px dotted #CCCCCC;
        padding: 1em;
        width: 100%;
        overflow: auto;
}
#center  > .content pre {
        width: auto;
}

IEのために幅100%を指定しますが、これだとOperaやMozilla系が横に伸びてしまうので、その後に子供セレクタを使った幅指定を上書きする。

さらにMac IEではdiv要素以外へoverflow指定すると、中身が消えてしまうバグがあります。対処方はoverflowを@media指定で指示すれば、Mac IEは無視してくれます。

@media screen {/* この中をMacIEは無視する */
        pre { overflow:auto; }  
}

pre要素の中身は表示されますが、当サイトは現在幅固定のレイアウトなので、Mac IEではレイアウトが崩れてしまいます。divで囲んで、それに対してoverflow:auto;すれば良いのは分かりますが、無駄なdivは入れたくないので、悪しからず。とりあえずデザインより内容を重視ということで、無視していますが。。。

2004-11-17T10:17:53+09:00 | コメント (2) | トラックバック (0) |はてなブックマーク

関連性が高いエントリー 5 件

トラックバック

このエントリーのトラックバックURL:
http://WWW.lucky-bag.com/cgi/mt/mt-tb.cgi/64

"pre要素にoverflow"へのトラックバックはまだありません。

コメント

mika-j さんからのコメント

blog作りの参考になりました。
ありがとうございます。
なかなかどのブラウザでも
同じ様に見えるって事は
難しいですね。

2005年07月21日 18:01
e-luck さんからのコメント [TypeKey Profile Page]

全てのブラウザで同じ様に見えるってのは正直厳しいですよね。
やろうと思えば出来るのかも知れませんが、なんか自己満足の世界になっちゃいそう。
それよりは、むしろ中身（コンテンツ）の方を充実させたいって思っちゃいますね:-)

2005年07月22日 14:16

コメントしてください

コメント内ではタグは一切使えません。コメント内にてタグを表記したい場合は、お手数ですが、文字実体参照を利用して < を &lt; 、> を &gt; とそれぞれ置き換えてください。




保存しますか?


(V) (P)