とある案件で text-indet: -9999px で背景を表示させるテクニックを使用したところ、text-indent が効かない現象が起こったため、発生条件・原因・対処法をまとめます。
※text-indet:-9999px=スパムというイメージを持たれる方がいらっしゃいますが、背景画像に書かれている文言と同じテキストをtext-indentで非表示にすることは問題ありません。 ユーザに見えている画像の文字と全く関係のないテキストをtext-indentで非表示にすることはスパムに当たる可能性が強いので行わないようにしましょう。
発生条件
text-indet が指定されている親要素に text-align: right が指定されていると発生します。
恐らくtext-alignが効くブラウザすべてで発生するものと思います。
◆サンプル
原因
text-align: right で右揃えにしているため、text-indet: -9999px で左側に飛ばしても右側のテキスト尻がくるという単純なものでバグでも何でもありません…。
対処法
text-indent: -9999px と一緒に text-align: left; を指定しておくことで対処できます。
———-
初めは、IE6で確認しため「またIE6のバグか･･･」と頭を抱えましたが、原因は自分のミスでしたorz
しかしながら、意外と見落としやすいミスではないでしょうか･･･！
