IEとGeckoでoverflowの扱いが違うって言うか妙っていうか

上の記事でpreを使おうとしてCSSいじってたらどうもoverflowの挙動がおかしかったのでメモ。
Geckoではoverflow:autoにしておけば何の問題もないようだ。でもIE6だと、どうもおかしい。

1. overflow:autoの場合
   • スクロールの必要がなくてもスクロールバーが縦横共に常に表示される
   • 勝手に出る横スクロールバーのせいでpreの中身が一行分見えなくなる
2. overflow:scrollの場合
   • スクロールの必要がなくても(略) いや、正しい動作だけど。

というわけでIEならどっちかというとoverflow:scrollがいいんだけど(overflow:hiddenはさすがに困る)、それだと今度はGeckoでおかしくなって、preの内容が1行だろうと強制的に3行分ぐらいheightが確保されるという…。
結局はCSS hackを使うことにしてしまった。hackは嫌いだ。

pre {
 overflow: auto;
 padding: 2em;
 width: 100%;
 font-family: Consolas, 'Lucida Console', Monaco, monospace;
 font-size: 80% !important;
}

* html pre { /* StarHtmlHack for WinIE4-6/MacIE4-5 */
 overflow: scroll;
}

Star Html Hackは、WinIE4〜6/MacIE4〜5だけにセレクタを適用させたい場合に使う。セレクタの前に「* html 」を加えればいい。IE7では効かないらしい。

あーやっぱり気に食わない…。

• Web製作
• CSS
• overflow