Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。

CSSでテキストを画像に置き換えた場合、フォーカス時にリンク領域を囲む点線が左側にぐぐ～っと伸びてしまう問題 ...に対処する方法。

上記の問題は、Firefoxで起きる。原因は画像置換を行う手段として、「text-indent」を使用しているから。text-indentによって表示領域外まで飛ばされたテキスト部分の分だけ、フォーカス時の点線が拡張されているのだと思われます。

この問題に対処するには、<a>に対して「overflow: hidden;」を指定してやれば良い。

おまけ

なお以下のように指定すれば、フォーカス時の点線は消すこともできる。

1. #logo a:focus {
2. outline: 0 !important;
3. }

とはいえ消してしまうとユーザビリティが損なわれるため、特別な理由が無い限りは消すべきでは無いでしょう