css: 2007年10月アーカイブ

cssをはじめたばかりの頃に疑問に思う様な些細な小ネタ関連。

text-indent:-9999px;等、text-indentでテキストを画面外に飛ばした場合、Firefoxではリンククリック時のリンクフォーカス点線が飛ばしたテキスト部分まで伸びて表示されてしまいます。

これを回避するには２通りの記述がありますが、対応としてはＮｏ２の方法がベストです。

★Ｎｏ１

●a {outline:none}

上記はリンクエリア点線自体が表示されなくなります。

Tabキーによるリンクフォーカスが見えなかったりと、アクセシビリティ的に難があります。

★Ｎｏ２

●a {overflow:hidden}

記述の通り、はみ出した部分のフォーカス点線は表示されません。ボタンエリアのみリンクフォーカス点線が表示されます。