text-indentが効かない?!
とある案件で text-indet: -9999px で背景を表示させるテクニックを使用したところ、text-indent が効かない現象が起こったため、発生条件・原因・対処法をまとめます。
発生条件
text-indet が指定されている親要素に text-align: right が指定されていると発生します。
恐らくtext-alignが効くブラウザ全てで発生するものと思います。発生を確認したブラウザは、IE6～8、Firefox2～3、Safari2～3、Google Cromeです。
◆サンプル
原因
text-align: right で右揃えにしているため、text-indet: -9999px で左側に飛ばしても右側のテキスト尻がくるという単純なものでバグでも何でもありません…。
対処法
text-indent: -9999px と一緒に text-align: left; を指定しておくことで対処できます。
----------
初めは、IE6で確認しため「またIE6のバグか･･･」と頭を抱えましたが、原因は自分のミスでしたorz
しかしながら、意外と見落としやすいミスではないでしょうか･･･！
