CSSのtext-indentの指定でリンクの点線がFirefoxではみ出る

web制作 Tags:

CSSでナビゲーションに背景画像を指定してtext-indent:-9999px;などとしてテキストを隠している場合、Firefoxなどの Geckoエンジンを使ったブラウザでナビゲーションクリック時にアウトライン（左の画像でいう点線）がはみ出て表示される事があります。

  
この記事は2年以上前に書かれたものです。
情報が古い可能性があります。

問題のコード

HTML

<ul id="gNav">
	<li><a id="gnTop" href="index.html">ホーム</a></li>
</ul>

CSS

#gNav { list-style: none; }
#gNav li #gnTop {
	display: block;
	width: 150px;
	height: 40px;
	background-image: url(home.gif);
	text-indent: -9999px;
}

解決方法

下記のようにすると線自体消えてしまいますので、

#gNav li #gnTop { outline: none; }

overflowの値にhiddenを指定します。

#gNav li #gnTop { overflow: hidden; }

MacIE5.xではoverflowの値にvisible以外を指定すると要素が消えてしまうバグがあるようでして、そちらの対応される場合はMacIE5.x以外に適用させてください。

  

共有やブックマークなど

コメントは受け付けていません。