<h1>表示テキストを0emとした場合の処理について

質問

初歩的な事で申し訳ありませんがご教授下さい。

見出しをテキストではなく画像として、なおかつ背景画像として処理をしたく、表示される結果に困っております。
特に意味は無いのですが、どうせ見出しに画像を使用するなら背景画像として<h1></h1>に変換し、何かＳＥＯ的にも良いかと勝手に判断しているのですが…
そこで、以下のような例を挙げさせて頂きます。

例）
<div id="sample">
<a href="hoge.html"><h1>あいうえお</h1></a>
<p>あいうえおの説明？</p>
</div>

div#sample h1{
display: block;
margin: 0;
padding: 0;
width: 340px;
height: 150px;
background-image: url(./img/sample.jpg);
background-repeat: no-repeat;
font-size: 0em;
color: #fff;
}

上記の場合FireFoxではそのまま背景画像が表示され、<h1></h1>内に入力したテキストも目には付きませんが、IEでの表示に限って約１ピクセル程の大きさでテキストが表示されてしまいます。

そこで皆さんにお伺いしたいのはIEでこの小さなテキスト表示を回避する方法はないかとお伺いをした次第です。
他のサイトでも同じことを行っているのですが上記のような現象は無く、今回に限って表示されてしまいます。
※表示はIE7での確認です。

解る方が居ましたら是非ご教授下さい。宜しくお願いします。

回答No.1

noname#83877 · ベストアンサー

operaは使われたことはありますか？
最小フォントサイズというのをユーザーが指定できるようになっていて、どんな指定をしてもそれ以上は小さくはできません。

よくtext-indent:-9999px;は聞きますが、font-size:0;はスパムと判断される可能性がかなり高くなるのでむしろやめたほうがいいと思います。
それと背景画像での表示はかなり状況を熟知していないと利用は控えるべきだと思います。
携帯等への対応を見越してというのならありえる話ですが、おそらく今の質問者さんのスキルから察するに素直にimgを使ってalt属性を使用される方がよいと思います。

補足

operaはブラウザ確認のみに使用しており、通常の私的使用にはFireFoxがメインです。
また、アドバイスを頂いた通りtext-indent:;でうまく対処が出来ました。
font-size:0;に関してスパムと判断されると言うのは良く耳にしますが、今後は出来る限り利用を控えたいと思います。

今回は本当にありがとう御座いました。