SHINN::Scribble

スタイルシートを書くとき，細かなデザインは後回しにして div タグで囲むエリアのサイズと位置を，ブロック図に書かれているように指定しました。位置決めが完了して，以下のブラウザ（これらでアクセスの 96% を占めるため）で表示確認したのですが，IE6 だけレイアウトが崩れます。二段組みの様に表示されるはずなのに，縦に並んでしまいます。

• Safari 2.0
• Internet Explorer 6 for Windows
• Internet Explorer 5 for Mac
• Firefox

各ブロックの横幅合計が大き過ぎるのではないかと思って何度も電卓をたたきましたが，間違いはありません。その後ネットでいろいろ調べてやっと原因が分かりました。IE6 のバグです。「ADP: IE6 の width 解釈バグ対処法」に分かりやすく書かれていますが，HTML の先頭が DOCTYPE 宣言で始まっていなかったため「互換モード」で解釈されていました。Movable Type のテンプレートは，XHTML なので xml 宣言で始めるのが正しいのですが，これだと IE6 が「標準モード」ではなく「互換モード」で解釈するので，幅の計算が想定しているものと異なり，結果レイアウトが崩れてました。先頭の xml 宣言を削除したら IE6 でも二段組みの様に表示されるになり OK かと思ったのですが，まだ問題が･･･

またもや IE6 だけですが，左右のマージンが設定通り均等にならず，左端に張り付いてしまいます。これも調べましたが，結局原因は分からずじまい。ただ，マージンを少し小さくすると表示が正常になることだけは分かりました。なので，IE6 の場合だけマージンの設定値を変えることにしました。Windows 用の IE は「条件コメント（About Conditional Comments）」が使えるので，IE6 にだけ読み込ませたいスタイルシートを別ファイルにして，条件コメントを使って読み込ませました。それにしても IE って CSS 関連のバグが多いんですね（「Internet Explorer (Windows) CSS バグリスト」）。

<link rel="stylesheet" href="styles-site.css" ... />
<!--[if gte IE 5]>
<link rel="stylesheet" href="styles-site-ie.css" ... />
<![endif]-->

おおまかなレイアウトが決まったので，後はフォントサイズや色などの細かなスタイルを指定するだけです。細かなスタイル指定では先程のような配置に関する問題があまりないので，つまづく事はないと思っていたのですが，IE5 for Mac で pre タグ内の文字が消えてしまう現象に直面しました。これは結構有名なバグのようで，すぐに原因を調べられました。div タグ以外に overflow を指定すると，その中身が消えてしまうようです。div タグに overflow を指定しないとレイアウトが崩れてしまうかもしれませんが，今回は無視することにしました。

今回のデザイン変更でいろいろと苦労はしましたが，いい勉強になりました。しかし，頑張った割にはデザインがパッとしないのはセンスの問題だから仕方ないか･･･

関連エントリー

• IE8 の互換モードで文字が消える