IE6で、block要素の縦幅が指定より大きくなる（画像置換した場合）

文字を画像で表現したいときにblock要素の背景に画像を指定して、text-indentにマイナスの値を指定して飛ばすというのは良くある方法。（画像置換、CSSでググるといっぱいでてきます）

これの是非はともかくとして、実際問題よく使う。
で、たまに起こるのが、IE6で、CSSで指定したheightよりもボックスの高さが大きくなってしまってレイアウトが崩れたり、見えちゃ行けない部分の背景画像まで見えてしまう。

例えば次のように書くと発生する。

■HTML側
<a id="test" href="#">画像置換</a>

■CSS側
a#test {
 display:block;
 font-size:12px;
 line-height:18px;
 width:200px;
 height:12px;
 background-image:url(img/test.gif);
}

aをblock要素にして文字を画像で置き換えたいのだが、問題はaボックスの縦よりもline-heightの指定のピクセル数が多いこと。こうするとIE6ではaボックスは高さが18pxになってしまうようで、上記のコードだと、背景画像がリピートしてしまう。

上記のようにline-heightとheightを同じ場所に書いているなら気づくでしょうが、line-heightが別のところに（初期設定として全体に影響するように）書いてあると気づきづらいかも。他のブラウザで大丈夫なので、「またIE6かよ」と思ってしまうが、これはこれで一理あるような気もしますね。