CSSでa要素に画像を指定したときに出る点線を消す
11 / 9 / 2008

例えばグローバルナビなんかでhtmlを

<div id=”navi”>
<ul>
<li id=”navi1″><a href=”1″></li>
<li id=”navi2″><a href=”2″></li>
<li id=”navi3″><a href=”3″></li>
</ul>
</div>

とし、cssで

#navi ul li a{
text-indent:-9999px;
}

#navi #navi1 a{
background:url(/hoge.gif);
}


みたいにするとリンクをクリックしたときに点線が出る。インデントしてる部分に点線が入っちゃうのか。

これを解決するためには

#navi ul li a:focus{
outline:none;
}

みたいにする。こうするとリンクの点線自体が表示されなくなる。それもなんか不自然なので

#navi ul li a{
overflow:hidden;
}

これもありなのか。

最近コーディングしてなくて色々忘れてしまう。困った!

Tags:

コメントする

Grow!

About this entry

CSSでa要素に画像を指定したときに出る点線を消す

Posted in 11 / 9 / 2008

Tags:

Bookmark

Share