行間を整えるline-heightだが、夏休みの宿題をやっていて実はお行儀が悪い（挙動が同じじゃない）ことが判明したので、ここでまとめてみる。
レイアウトにおいて高さを固定し、そこにテキストを入れようとすると、文字サイズを可変に出来ないのでアクセシビリティ的にはよくない。が、たまに使いたくなると思う。
そんときは、文字サイズをピクセル指定すればいいよ、だけではなくて、line-heightをうまく指定しないとならんよ、という話。
p {
margin: 1em;
background-color: #aaaa99;
font-family: "ＭＳ Ｐゴシック";
font-size: 10px;
border: 1px solid black;
}
.p1 {
line-height: 100%;
}
.p2 {
line-height: 1;
}
.p3 {
line-height: 1em;
}
.p4 {
line-height: 10px;
}のように、font-familyとfont-sizeを固定にして、さらに、line-heightをp1～p4のように指定したp要素がどう表示されるか、やってみた。
結果。
MozillaやOperaでは、4つの結果は変わらない。縦の幅は、10ピクセルである。
MozillaやOperaの結果 (330 by 243 pixels, 3KB)
一方、IE6だと、line-height: 100%;のときだけ、縦の幅が、11ピクセルになり、その他では10ピクセルになる。しかも、そのほかもテキストが配置される場所がMozillaやOperaとは異なる。
IE6の結果 (330 by 243 pixels, 3KB)
結論。テキストの場所をIE6とその他でピクセル単位で一致させることは、font-familyとfont-sizeを指定してもうまくいかない。高さだけ何とか合わせたい場合は、font-sizeを指定し、line-heightをパーセント以外の方法で指定する。
追記：IE6とその他で、ぴったりにあわせることが出来るらしい。p要素の中にインライン要素（たとえばspan要素）をいれ、そのインライン要素にvertical-align: 0指定すると、うまくいく。デフォルトのスタイルをちゃんと無効化しないといけないということやね。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/297
