IEが情けなさすぎる件
ほんとうにたまたまなのですが、講義用のBlogをGrani(Fenrirのブラウザ)で見てみました。そうしたらなんかヘン。エントリ本体とカレンダなどのサイドバーとの2列表示のはずが、左にあるはずのサイドバーがエントリの下側に行ってしまっているのです。あわててほかの講義や演習のBlogも確認したら、みんな同じようになってます。(今まで気づかなかったw)
GraniはInternet Explorerのエンジンを使って表示するブラウザなので、結局IEが元凶か?と思ってIEでも表示させてみたら、案の定その通り。
IEはしばしばこちらの思った通りの表示をしてくれないので困ってしまうのですが(たとえばこの例とか)、今回も困ってあれこれWebをさまようことに。
そうしたら、某所でこんな記述に出会いました。
……なんだそれはー!
実は使っているスタイルシートにはこういう記述があります。(例)
#container {
width: 700px;
background-color: #FFFFC0;
border: 1px solid #FFFFC0;
}#center {
float: left;
width: 500px;
overflow: hidden;
}#right {
float: left;
width: 200px;
background-color: #FFFFC0;
overflow: hidden;
}
いろいろ省略しておりますが。
つまり上の例では、表示部全体で幅が700ピクセルというところを、本体500ピクセル、右サイドバー200ピクセルに分割しているのですが、floatを使っていると、IEはなんと自動で3ピクセルあけて表示しようとするのだそうな。(ってことですよね?)
じゃあなにか、たとえば500+200から3引いて、500+197ならいいのか! と思ってやってみたら……うまく表示されました。orz
Firefoxではほとんど両者の表示は同じです。
しかし……情けなさすぎるぞInternet Explorer。