CSS « 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;
 }

忘れないようにしとこ。

2009年10月28日

写真を敷き詰めた時に、li aで組むとIE6で見るとちゃんと横並びにならない。

自分の子供の少年野球チームなので、対応しなくてもいいかなとも思いましたが、

IE6に対応してみました。