リンクボタンを押すときに出る点線について
リンクボタンを押すときに出てくる点線って少し気になりますよね。ましてや上のようになんだかずれているときなんて気になって仕方がない!そんなリンクボタンを押したときに出る点線についての対策法について書きたいと思います。
Windows XP、Windows Vistaの次はWindows 7って名前らしい。うーん微妙。
- IEでリンクボタンを押したら点線がずれる場合
- 通常画像にリンクを貼る際には、<a href="#"><img src="hogehoge.jpg" /></a>のように書きます。このように一行でソースを書くと問題なく、画像の周りだけに点線が現れますが、
<a href="#">
<img src="hogehoge.jpg" />
</a>
のように改行してソースを書いてしまっている場合は、上記のようにずれて点線が現れます。細かいことですが、少し注意したいですね。ただソースを改行していても、下記のように記載すれば、点線すら消すことが出来ます。
<a href="#" onFocus="this.blur()">
<img src="hogehoge.jpg" />
</a> - FireFoxでリンククリック時に表示される点線について
- text-indent:-9999px;などでテキストを画面外に見えないようにした時、Firefoxではリンクボタンをクリックすると点線が伸びて表示されてしまします。その解決方法として
a:focus{
outline:none;
}
でリンクの点線自体を表示させなくなります。その他の方法として、
a {
overflow:hidden;
}
で、画面外部分の点線は表示されません。
リンクボタンを押すときに出る点線について