とあるWEB屋の装飾表記2

前の記事を投下した直後に思いついたこと。
今更感満載だけどよくあるIE6のバグ対策について自分用にメモ。

マージンが2倍になってしまうバグ

floatさせた要素に指定したmarginが何故か倍になってしまうバグ。
遭遇率で言えばダントツ。

下記の場合、margin:leftが20pxになる

#hogehoge{
float: left;
width: 200px;
margin-left: 10px;
}

対策方法
「display: inline;」を指定してあげる。

#hogehoge{
float: left;
width: 200px;
margin-left: 10px;
display: inline;
}

もしくは、可能ならmarginでなくpaddingを使うのも手。


小さいheightの値が無視されるバグ

1pxや2pxに指定したheightが無視されてしまうバグ。
時々遭遇して首をひねる。

下記の場合、heightが大きく表示される

#hogehoge{
width:10px
height: 1px;
}

対策方法
「font-size」を0にする。もしくは「overflow:hidden」で潰してしまうか。

#hogehoge{
width:10px
height: 1px;
font-size:0;
overflow:hidden;
}


めんどくせえ!という方に

手っ取り早いIE6用CSSハック。

IE6だけmarginを半分にする場合

#hogehoge{
float: left;
width: 200px;
margin-left: 10px;
_margin-left: 5px;
}

IE6はアホなので、プロパティの前に「_」を置いてもちゃんと中身を読み込みます。
他のブラウザは賢いので無視してくれます。
ちなみに、IE6と7だけに適用する場合は「_」でなく「*」を使う。
この2つを組み合わせれば、IE7だけ狙い撃つことも可能。なはず。

ただし正式な文法じゃないので怒られても知りません。

  1. コメントはまだありません。

  1. トラックバックはまだありません。