点線消し « Funalogue Column

点線消し

2009年10月28日

CSSでtext-indent:-9999px等を指定してテキストを画像置換えのときに、
Firefoxでリンクをクリックすると左の端から点線が出る時の消し方。

a {
 /*¥*/
 overflow: hidden;
 /**/
 }

【ポイント】

outline: noneで点線を消すとタブでフォーカスを移動させても

どこにいるか分からなくなるのでアクセシビリティが低下するためoverfow: hiddenを利用する。

MacIEでoverflow: hiddenを使うとリンクが消失するためハックでMacIEには適用させない。

点線そのものを消す方法もあり。
ここを参考にさせてもらいました。

a:focus{
 outline:none;
 }

忘れないようにしとこ。

Trackback URL :