一寸腹立つ CSS バグ
【9月8日特記】 くやしいんですよね、IE がちゃんと CSS 読んでくれないことが。いや、前から知ってて放置してあったんですが、僕がホームページのほうに今日書いた原稿みたいな構成になってくると、IE では見事に不細工なことになります。
例えば、その1つ前のコラム:「故・阿久悠さんに」を見てみてください。IE でご覧になっている方は文章が左右の幅一杯に広がっているでしょう? 僕はそういうデザインは意図してないんです。Firefox で見ていただければちゃんと表示してるんですけど、700ピクセルの幅で左右に均等の余白を設けてるんです。
ところが、これを IE はちゃんと読んで表示してくれないんです。
ま、いっか、とずっと放置してあったのですが、ところが今日ホームページに上げた文章:「ハワイアンへの道」みたいな構成になってくると、ブラウザを最大幅で開いていると文章は左右に間延びしてるのに、いくつかある Amazon のバナーは確実に一定の高さを消費するので非常に見にくくなってしまいます。
え? IEで見てるけど、ちゃんと 700px ぐらいの幅に文章が入ってるよ、って?
(実際には IE7 なら 700px-6em になってはず。なんでそうなるかはソースを見ていただければおわかりかと・・・)
そうなんですよ。この章だけは悔しいので別の CSS 立てたんですよ。でも、これでちゃんと表示できてるかって言うとそうじゃないんです。僕はコンテンツを画面の中央に float させたいのに、IE だと左に寄っちゃうんです。なんでですかね。
で、元の CSS だと body に直接 width と float を設定してるんですが、Firefox はこれを完璧に解釈してくれるのに、IE だと全くダメ。で、仕方なく body タグの内側に div を切って、そこに class で指定して width と float を設定してみると、IE もやっとのことで width に関してのみ言うことを聞いてくれました(当たり前ですが Firefox はこのように書き換えても元と同じ表示をしてくれます)。
なんでこんな面倒くさい設定しなきゃならんのでしょう?
ウェブ上いろいろ検索してみたんですが、少なくとも簡便明快と言えるような解決策は載っていませんでした。
お願いしますよ、Microsoft さん。
« 嵐を呼ぶ男2 | Main | 映画『ショートバス』 »
Comments