IE9でテキスト飛ばし text-indent: 100%;が使えない

いまごろIE9ですって！？という方も多いかもしれません。

CSSでテキストを飛ばして画像を表示させる方法がありますが、IE9でテキストが飛ばしきれていなかったようです。

f:id:emj1025:20151029172927g:plain

こんな感じに「EWS」と飛ばしたかったテキストが画像の上に表示されてしまっています。

.title {
overflow: hidden;
white-space: nowrap;
height: 80px;
background: url(../images/ttl.png) no-repeat 0 0;
text-indent: 100%;
}

このtext-indent: 100%;がちゃんと機能していないようです。

f:id:emj1025:20151029172939g:plain

.title {
overflow: hidden;
white-space: nowrap;
height: 80px;
background: url(../images/ttl.png) no-repeat 0 0;
text-indent: -9999px;
}

「%」をやめて「px」に変更することで正常に動きました。

Vistaのサポート期間が終了するまで（2017年4月11日）はIE9に対応するべきか否か…

テキスト飛ばしはスパム扱いにされるのでSEO的に良くないと言われています。

なんとなくtext-indent: -9999px;よりtext-indent: 100%;のほうがSEOによさそうかなと思って使っていましたが、検索エンジンからするとどちらも同じですかね。

正しく使っている分にはGoogleがそのうちちゃんと解釈して減点対象にはならないのでは？とも言われていますがその真偽は謎です。

このタイプの画像の表示方法は、画像を一つにまとめてリクエスト削減ができるメリットはあるのですが、以下の記事を読み返し、結論を参考にしたところ、テキスト情報が含まれるものはCSSスプライトを使わないほうが良さそうです。

いろいろ悩ましいです。