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は入れたくないので、悪しからず。とりあえずデザインより内容を重視ということで、無視していますが。。。
Comments
blog作りの参考になりました。
ありがとうございます。
なかなかどのブラウザでも
同じ様に見えるって事は
難しいですね。
全てのブラウザで同じ様に見えるってのは正直厳しいですよね。
やろうと思えば出来るのかも知れませんが、なんか自己満足の世界になっちゃいそう。
それよりは、むしろ中身（コンテンツ）の方を充実させたいって思っちゃいますね:-)