ブラウザに関するお小言・・・IE5.5～IE7のバグ＆対策メモ

公開日: 2011/01/31 | 最終更新日: 2018/06/06 Web＆PC関連メモ

私自身は、Operaをメインブラウザとして使っているんですが、世の中には、まだまだIE（Windows Internet Explorer）ユーザーが多いようです。そしてそれがバージョンアップされてない場合、古いIEは、思いもよらないバグでサイトの表示を崩れさせていたりします。（以前、旅先のホテルのパソコンで自分のサイトをチェックしてビックリした経験あり。）

ということで、サイト作りする中で私が直面したIE5.5～IE7のバグとその対策をメモ。（実は、IE対策を知らないまま、ごりごりカスタマイズしたこのブログも、IE5.5とIE6で崩れています。早く対応させなきゃ。）

古いバージョンのIEでどう表示されてるかチェックするには、
＞＞ IE Tester が便利です。IE5.5～現在のバージョンまでのIEの表示確認ができます。

● 古めのIEでは効かない属性など。
-　属性： min-width、min-height、max-width、max-height（IE5.5～6 非対応）。
-　擬似要素： before、after（IE5.5～7 非対応）。
-　{ overflow: hidden; } も場合によっては効かない模様？

● 古いIE特有の幅（width）、高さ（height）の取り方による崩れ（IE5.5～6）。サイドバーが落ちるなど。
[対策]
-　同じボックス内で、width と左右の padding を設定しない。 border の太さも考慮する。
-　同じボックス内で、height と上下の padding を設定しない。 border の太さも考慮する。
[参考]
-　CSSレイアウト崩れの原因 – ブラウザによる「padding」の解釈の違い（CSSレイアウト実践講座）
-　CSSレイアウト崩れの原因 – ブラウザによる「border」の解釈の違い（CSSレイアウト実践講座）
-　IE6のバグのまとめ（Webtech Walker）

● floatさせるボックスに幅（width）の指定がないと崩れる（IE5.5～7）。
[対策]　floatさせるボックス全てに幅を指定。

● widthの指定バッチリなのに、floatさせてるボックス周りが変。並んでなかったり、あるはずの線（border）が消えてたり、何も指定してないところに線が入ってたり（IE5.5～7）。
[対策]　floatさせてるボックスの親ボックスの幅（width）を指定。
[参考]　floatした部分のborderが消えるIEのバグ（うかブログ）

● 表（table）の中に親要素の文字スタイルが継承されない（IE5.5～6）。
[対策]　th, td にも文字のスタイルを指定する。

● リンク画像の周りに勝手に枠線が入る。 { border-style: none; } が効かない。
[対策]　img { border: 0; }　（画像の太さを0に指定）

● 改行タグ<br />を読んでくれない（IE5.5～7）。
[対策]　br { letter-spacing: 0; }　をスタイルシート最下部に追加。
[参考]　IEで改行タグ<br>を連続しても改行されないバグについて（FC2ブログのテンプレート工房）

▼ わたしがXHTMLとCSSを勉強した本。