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

公開日: 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を勉強した本。

スポンサード・リンク

関連記事

タブレットPCでGIMPを筆圧感知(筆圧検知)対応させる方法メモ

タブレットPC(Surface Pro, ThinkPad Yoga 260)のデジタイザー

記事を読む

[WordPressメモ] カスタム投稿タイプを追加したときの確認事項

カスタム投稿タイプ(カスタムポストタイプ)を設置したら、設置しただけでOKではなくて、そのカ

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

サイト内検索

こんにちは♪

ブログとジーンズと地元・九州が大好きな こっとんこっとん です。

こっとんこっとんのウェブログは、わたしが初めて開設したブログです。暮らしや興味のあるいろいろについて書いています。

PAGE TOP ↑