pre要素にoverflow

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は入れたくないので、悪しからず。とりあえずデザインより内容を重視ということで、無視していますが。。。

この記事についての情報

似た内容の記事

この記事に対するトラックバック

トラックバックURL: http://www.lucky-bag.com/mt/mt-tb.cgi/318

Comments

mika-j said:

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

e-luck said:

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