[CSS]気をつけたいIE 7のバグ -CSS-Discuss

CSS-Discussにアップされている「IE 7 Bugs」の意訳です。
省略している箇所も多数あるので、原文も参照ください。

Internet Explorer Win Bugs - css-discuss

注意:
バグには、IE7のみでなく、IE 5, 5.5, 6のものも含まれています。
公開されてから時間が経っているためか、ちょっと古いものもあります。

IEのフォントサイズのバグ

フォントサイズの継承

IEの相対指定のフォントサイズの継承は、うまく機能しません。
相対指定を行う場合、emより%で指定を行う方が便利です。もし、em指定を行う場合は最初に%指定を行ってください。

例:

body{
 font-size: 100.01%;
}

※100%の代わりに100.01%を使用するのは、Operaでの継承バグの回避のためです。

キーワード指定でのサイズ

フォントサイズに「small, middle」などのキーワード指定を行った場合、IEの描画モードによって表示されるサイズが異なります。
その場合、CSS Hackを使用して同じようにすることができます。

例:

body{
 font-size:small;
 voice-family:""}"";
 voice-family:inherit;
 font-size:medium;
}

※voice-family hackを使用しています。

IEの配置のバグ

予期せぬスペースを配置するバグ

画像の後。

例:

<div><img src="sample.jpg" alt="" /></div>

※同じ行で</div>を使用。

水平型のリスト項目の間。
リストの項目を一行ごとに記述するか、IEのみスタイルシートで左のマージンに「-3px」を指定します。
IE6では、リスト項目の下にボーダー指定します。

空のdiv。
空のdivを設置する場合は、スペースや「&nbsp;」ではなく、コメントを使用します。

例:

<div><!-- --></div>

相対値で高さ指定を行ったエレメントの配置

IE 5, 5.5, 6のバグで、回避策については分かりません。

textareaのサイズを100%にした場合

textareaのサイズを100%にした場合、そこにテキストを入力すると幅が拡張します。
デモページ
100%を使用しないか、textareaを<fieldset>で囲むと直ります。

IEの#idと.classのバグ

すぐそばの他のIDとclassにスタイルシートの設定をした場合、二つ目以降の指定を無視するバグがあります。
デモページ

IEの最後に記述したクラスのバグ

複数のクラスを記述する場合、IE6, 7で最後に記述したクラスが同じ名前の場合にバグがあります。
デモページ

最後に記述するのは、異なるクラス名にするようにします。

例:バグ(最後に同じ名称)

.girl.cover{
 background:green;
}
.boy.cover{
 background:red;
}

例:最後に異なる名称

.cover.girl{
 background:green;
}
.cover.boy{
 background:red;
}

IEのフロートのバグ

divにフロート要素がある場合に、バグがでるかもしれません。
その場合、divにheight, line-heightなどを指定します。

リソース

Collection

Overview

Specifics

top of page

©2017 coliss