IE7でのtext-indent:-9999px

質問

複数ブラウザ（Win：IE7,8、Firefox3～、Mac：Safari3～、Firefox3～）対応のコーディングをしています。
申込ページなどでinput type="button"のvalueに対して、CSS側でtext-indent:-9999pxを設定すると、
他のブラウザでは問題ないのですが、IE7だけ、inputごとページ外に移動してしまいます。

inputボタン自体には、いかのような記述をしています。

form p#bt-send input {
border:none;
text-indent:-9999px;
cursor:pointer;
width:217px;
height:41px;
background:url(ボタンイメージのパス) no-repeat center 0%;
}

テキストインデントを使わないやり方で、inputのvalueを見せないやり方はありますか？
ちなみにボタンイメージには「送信」という文言になっており、value="送信"としていますが、
テキストインデントを使わないと、ボタンイメージの上にデバイスフォントが出てしまいます。

回答No.1

ORUKA1951 · ベストアンサー

後方互換を考慮するページなら、botton要素を使うべきです。
form button{
border:none;
width:217px;
height:41px;
cursor:pointer;
background-color:white;
}
<form action="">
<button name="submit" value="送る" type="submit"><img src="images/form_submit.png" alt="送信" width="217" height="41"></button>
</form>

お礼

ご回答ありがとうございます！大変参考になりました。