[CSS]気をつけたいIE 7のバグ -CSS-Discuss
Post on:2007年10月31日
sponsors
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を設置する場合は、スペースや「 」ではなく、コメントを使用します。
例：
<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
sponsors
