20071126
CSS でテキスト（リンク）を画像に置き換えた際、Firefox でそれをフォーカスすると、どこまでも果てしなく点線が伸びてしまう問題。今まではFirefox の仕様かと思って放置していたんですが、簡単にこれを解消することができました。
具体的にどんなときに点線が現れるかというと、
text-indent: -9999px;
display: block;
width: 100px;
height: 200px;
background: url("http://....") left top no-repeat;
こんな風にしてテキストを画面外に吹っ飛ばしたときなんですね。以前、どこかのサイトでこの手法はあまり良くないですよと言われていたように記憶していますが、僕の場合はお構いなしにこれを乱用してます。で、この場合、画面上ではテキストは消えたように見えるのですが、はるか彼方にちゃんと存在しているために（逆に言えばこれが重要なんですけどね）それをフォーカスしようとして点線が振り切れるという理由でした。
なので、これを解消する場合は、上記記述に次の一行を加えます。
overflow: hidden;
はい、たったこれだけ。でも今まで全然気がつきませんでした。今後 text-indent でテキストを画面外に飛ばす際には、これもセットで記述するようにしようと思います。あーすっきりした。
2個のコメント
こんばんは。
他にも「outline: none;」とか「outline: 0;」でも良いみたいです。
ただこれだとリンクをフォーカスしたときに点線自体が消えてしまうので「overflow: hidden;」がベストでしょうね。
でもさらに完璧を目指すなら、これだけだとMac版IEで問題があるみたいなのでMac版IEだけには読み込ませないように「/* \*/overflow: hidden;/* */」とした方が良いみたいですよ。
でも個人的にはできるだけCSSハックは使いたくないので申し訳ないんですがMacは無視ですかね（笑）
そもそもMac使ってるのにあえてIEはなかろうということで。
おおー、すごいですね。
outline という発想はありませんでした。勉強になります！
リンクフォーカス時の点線というのはアクセシビリティにどの程度寄与しているのかは不明ですが、無いよりはあったほうがいいんでしょうね。
Mac版IEの件については、無視という決断に一票。
今更サポートの終了しているようなブラウザを考慮する必要性は僕も薄いと思っています。そもそも、SafariがあるのにわざわざIEを使っているような人が世の中にどのくらいいるのかと。
Windows版IE（6以前）はまだまだ現役なので、バグへの対処では仕方がなくアンダースコアハックでしのいでいますが。僕も基本的にはハックはあまり好きではありません。