たまにはWebに関係ある事を書こうと思います。
一部のブラウザ（Firefox他）で閲覧したとき、画像置換で作ったリンクボタン（ナビゲーション等）をクリックしたら画面いっぱいに出てくる点線が気になるので、それを解決しましよう。
（もう出つくしたネタではあるけど）
まずクリックした時に点線が出てくる原因は、本来アンカーの対象であるテキストが、「text-indent: -9999px;」など、テキスト飛ばしによって画面のはるか彼方へ飛ばされているため。
なので、CSSで指定したwidthからあふれる内容に対しては、以下のようなCSSで隠してしまうことによってあの変な点線は消すことができます。
ul li a {
display: block;
width: 150px;
height: 40px;
text-indent: -9999px;
overflow: hidden;
}
これで解決！と思いきや、このままではMac版IEの場合、お得意のバグによりリンクそのものが消失してしまうので、以下のようにHollyハックを使って、Mac版IE以外のブラウザに適用されるようにします。
ul li a {
display: block;
width: 150px;
height: 40px;
text-indent: -9999px;
/*\*/
overflow: hidden;
/**/
}
これで、あの訳の分からない点線は表示されなくなります。
別に気にするところじゃないのかもしれないけど、解決したら、ちょっとだけスッキリしますよね。
One Trackback
On 2009 年 9 月 22 日 at 10:55 AM
[...] 詳細はコチラ様サイトと参照 katt weblog リンク画像をクリックしたときに表示される点線を解決！（消す） [...]