CSSテクニックコミュのNetscapeのtext-indentについて

質問魔ですみませんです...今回もよろしくお願い致します。

■Netscape(7.0)でのtext-indentについて

divの表示をブロックにして、アンカー設定。
テキストがなければアンカーはかけられないので(音読・SEO対策も含め)
text-indentを利用して画面外へテキストを飛ばしています。

私はIEとNetscapeとFirefoxでローカル確認するのですが、
なぜかNetscapeだけびよーんと軌跡が残ったように、
text-indentがリンク色のラインで表示されてしまうのです。

これってバグでしょうか...？(´д｀；)なんじゃこりゃー

念のためにサンプルを添付しておきます。
解決策をご存知の方いらっしゃいましたら、
よろしくお願い致しますます。

<body>
<div id="box">
<div id="link_pos"><a href="#">text</a></div>
</div>
</body>

#box {
height: 200px;
width: 500px;
position: relative;
}
#link_pos a{
text-indent: -5000em;
display: block;
height: 30px;
width: 80px;
background-color: #FFCCFF;
border: 1px solid #000000;
position: absolute;
left: 403px;
top: 154px;
}

コメント(6)

最初
全て
最新の40件

[1] mixiユーザー 09月11日 19:51

/*\*/
#link_pos a{
overflow:hideen;
}
/**/

#link_pos a:hover{
text-decoration:none;
}

でどうでしょう？

[2] mixiユーザー 09月11日 19:56

Netscape7.1にて検証しましたが、同じ現象には至りませんでした。
おそらくはtext-decoration: none;を指定すれば消えると思うのですが…

ちなみに、Firefox1.5からアンカーのフォーカスラインの挙動がかわりました。
text-indentで横に飛ばすと、飛ばした分だけ点線のフォーカス枠が伸びてしまいます。アンカーをクリックしようとするとなるはずです。
回避方法としては、

outline: none;　を指定する。
overflow: hidden;　を指定する。

のいずれかになります。
ただ、前者はユーザビリティを考慮すると好ましくにかもしれません。

[3] mixiユーザー 09月11日 19:59

＞ 1: ウソップさん
ウソップさんのおっしゃる通りに記述すると、
hover時にだけラインが消えたので
a自体にtext-decorationを付けたし、解決することができました！
こんなに早く解決するとは思いませんでした＞＜
ご伝授ありがとうございました＾＾*

[4] mixiユーザー 09月11日 20:01

＞2: かずやさん
おっしゃる通りでしたｗ

＞Firefox1.5からアンカーのフォーカスラインの挙動がかわりました
知らなかったー＠＠　勉強になりました。
outline: none;
overflow: hidden;
も足しておきたいと思います。
ご親切にありがとうございます＾＾

[5] mixiユーザー 09月11日 20:16

正確には、Firefoxだけではなく、バージョンアップしたGeckoエンジンを使用しているブラウザすべてがそうなります。
お役に立てたようでなによりです☆

[6] mixiユーザー 09月13日 12:33

＞ 5: かずやさん
なるほどー！詳しくないので調べてみようと思います。
重ねて御礼申し上げますｖ

ログインすると、みんなのコメントがもっと見れるよ