リンクをクリックしたときに横に伸びる点線を消す方法（Firefox） - IDEA*IDEA

FirefoxだとCSSで文字を画面外に追いやって、画像を配置している場合リンクだったらクリックした時に元の文字がある部分まで点線が表示されちゃいます。
上の画像みたいな感じです。

それを消すのにはa要素に

overflow:hidden;
outline:none;

を使うそうです。

 

しかし、確かにマウスでクリックした時に点線が表示されなくなりますが、同時にTabキーを押してフォーカスを合わせた時にも点線が表示されなくなり、どこにいるのか分からなくなるという事態になります。
もちろんきちんとフォーカスが当たっている場合は画像を変化させるなどの対応が必要です。a:hover要素がある場合はa:focusを指定してやるなどの対策です。

元々文字を追いやって画像を表示させるCSSのテクニックは最近では「ちょっとどうなの?」というテクニックです。
何かしらの事情があって画像が表示されていない場合、利用者にきちんと情報が伝わらない事が考えられるから。

 

どうして自分は画像置換のテクニックを使っているかだって?
これは1度作ると楽なんですよね;p

点線を非表示にするくらいなら、別の方法を用いた方が良いかもしれません。