普段の業務ではがっつりコーディングすることが多い私です。
TOPページのトピックス部分を制作していたら、こんなトラブルに見舞われました。
[症状]
liやdt・ddなどの、要素が複数縦ならびするページを制作時。
<img>の入った行だけ高さがずれる。
（
IE6、
IE7での検証時。Firefox2、safari3では問題なし）
[修正方法]
li {
line-height: 1.8;
layout-grid-line: 1.8;
}
layout-grid-line要素はIEのみに適用される行の高さを指定するスタイルで、
これにline-heightと同じ値を入れておけば、imgが入ってもズレません。
よく文頭・文末についている「New!」などのアイコンを入れるには便利だと思います。
line-heightを入れずにpaddingやmarginを設定する方法もありますが、それだと要素内が複数行になるときに描写が不自然なので、行き着いた結果がこれです。
[補足]
ついでに、これを追加しておけば画像の縦位置もきれいに決まりますね。
左右のmarginも適度に入れるとより好ましいと思います。
li img {
vertical-align: middle;
}
[動作環境]
WinXP
InternetExplorer6
InternetExplorer7
[参考]
http://q.hatena.ne.jp/1194660772
Calender
