text-indent:-9999pxでテキストを飛ばすと、余白ができる

WEB

CSSでの画像置換を行っている部分に、0.5em分くらいの余白が出来てしまう。Mac Safari、Win Chromeで確認。


HTML

<div class="head">
　　<img src="head.gif"><h2>見出し</h2>
</div>
<p>本文本文本文･･･</p>

CSS

h2{
text-indent:-9999px;
line-height:0;
margin:0;
padding:0;
}


何このHTML、なんて言われてしまうと苦笑いするしかない･･･。言い訳をしておくと、私が書いたソースではなく、もともとあったHTMLを修正していたらこんなふうにマークアップされていたのでした。


現象としては、head部分のh2要素をtext-indentで飛ばしていると、Mac Safariの場合、h2要素とp要素の下に、フォントサイズの半分くらいの余白が出現してしまいます。Win IEやFireFoxでは出現しません。
ためしにtext-indentをdisplay:none;にしたら、余白は消えるんですよね。
line-heightあたりがあやしいなーと、いろいろいじくりまわしてるうちに、そもそも画像置換しなくてもいいよなあ･･･とふっと思ったので、その方向で対処しました。なのでいまだに原因分からず。


それにしてもこれ、背景画像をロールオーバーしているわけでもないし、クリーンなHTMLになるわけでもないし（むしろ汚くなっている･･･）、SEO的にテキストを使いたかったのかもしれないけど要素はh2だし、なんで画像置換してたんだろう･･･。


個人的に、text-indentを大きな値にしてテキストを飛ばす画像置換の方法はなんか好きでないです。
CSS有効で画像非表示だと何も見えないとか、そういう問題を除いても、9999px向こうにはテキストが浮かんでいるんだよなあと思うと、もぞもぞしちゃうというか。なんか、机の上にモノがあふれて散らかってるから、むりやりタンスに押し込めちゃったときみたいな、落ち着かない気分になります。