IE6-7でボタンのテキストを非表示にする

2014/02/08 更新

IE6-7でボタンのテキストを非表示にする方法が意外すぎるので、自分用にメモ。

先日、本ブログ design edgeのデザイン変更のためにコーディングをしていたところ、IE6-7でSubmitボタンのテキストを非表示にできず、つまずきました。以下、元のソースです。

HTML

<input type="submit" class="search-submit" value="Search" />

CSS

text-indent: -9999px;
background: url(../img/submit.png) 0 0 no-repeat;

text-indentにネガティブな値を指定することでボタンのテキストをボタン外に飛ばし、backgroundで背景画像を表示させています。当然、モダンブラウザでは問題なくsubmit.png（虫眼鏡アイコン）だけが見えている状態になります。しかし、IE6-7ではなぜかtext-indentが無視され、submit.pngとボタンのテキストが重なってしまっています。いくつかIE用のハックを試してみたものの、うまくいきません。

解決策

日本語のサイトでは解決策を見つけられず、さらに調べているうちに、海外のサイトで解決策を見つけました。

text-transform: capitalize;

これでうまくいくよ！ということです。でも text-transformは、テキストの大文字・小文字を指定するプロパティで、capitalizeという値は単語の先頭文字を大文字にするためのもの…。なぜ？と思いつつも背に腹はかえられないので、あまり深く考えずにこれをIE7-6用に加えてみると… できました！理由は不明ですが、ボタン上のテキストを非表示にすることができました。