こんばんわ。

画像を css の background プロパティを使用して表示させ、テキストは text-indent プロパティの負の値(-2000px)を使用してブラウザで見えない領域までおいやる方法、
いわゆるImage Replacement を利用しているサイトで、フォーカスを合わせたりマウスでクリックすると、点線が表示されてしまいます。
再現するサイトは以下の通り。

■Jeffrey Zeldman Presents The Daily Report
http://www.zeldman.com/
※「The daily report」「designing with web standards」のナビゲーションをクリック。

■Stopdesign
http://www.stopdesign.com/articles/replace_text/
※「stopdesign」のロゴをクリック。トップページ以外であれば再現します。

■Mozilla Japan
http://www.mozilla-japan.org/
※「Mozilla」のロゴをクリック。

Firefox 1.5 で outline-color, outline-style, outline-width, outline-offset, outlineに対応したおかげのせいだということは調べていくうちに分かりました。

でも、そのテクニックを使っている（特に CSS をうまく利用した海外の多くのサイト）を Fx1.5 で見ると、点線が表示されてしまう有様です。

私も仕事で同様のテクニックを利用しておりまして、Fx1.5 で今まで構築したサイトを見ると点線が表示されてしまいます。
この点線を消していく作業にまた時間を費やすのを考えると、頭が痛くなります。

この新しい仕様を、表示されなかった 1.0.7 の時の仕様に戻せないのでしょうか。
よろしくお願いいたします。

----以下、参考にしたサイト
■CSSメモ: Firefox 1.5での新機能\r
http://f57.aaa.livedoor.jp/~motohiko/CS ... Fx1.5.html

■Firefox 1.5と「outline」
http://www.cybergarden.net/blog/2005/12 ... tline.html

■outline doesn't include larger descendants of inline elements
https://bugzilla.mozilla.org/show_bug.cgi?id=133165

■Accessible Image Replacement
http://phark.typepad.com/phark/2003/08/ ... _imag.html

テキストは見えないだけでウィンドウのはるか左のほうに存在しているので、クリックしたときに点線の矩形で囲まれるのは仕様です。
HTML,CSS的には当然の動作です。



http://www.d-toybox.com/studio/weblog/show.php?mode=single&id=2005092101

ここにもあるようにtext-inentで負の値を指定してテキストを見えないようにするテクニックはいわゆる裏技のようなもので、決して「CSSをうまく利用した」ものではありません。
現在のメジャーなブラウザの実装では問題ありませんが、将来修正されるととんでもないことになります。

_________________
[Desktop] Windows 10 Pro 22H2 (64bit) / Intel Core i7-2600 / Nvidia GeForce GTX 1650 GDDR6 / 32 GB Memory
[Laptop] Windows 10 Pro 22H2 (64bit) / Intel Core i5-520M vPro / Intel HD Graphics / 8 GB Memory
[Android] Android 13.0 (arm64) / Xperia 5 III (XQ-BQ42)
常用環境: Firefox ベータ版、リリース版 (Win64 x86-64, Android), Thunderbird ベータ版、リリース版 (Win64 x86-64)
テスト環境: Firefox (ESR, Nightly, Win64 x86-64, Android)
Cai/1.0 (Homo sapiens; N; Homo sapiens chemist; male; rv:0.0.4.2+)
-- いつまでたっても nightly

こんにちは。



もちろんそのような回答が来るであろうと予想していました。
正しい動作になるのは良いことだと思いますが、やりきれない気持ちでもあります。



「うまく利用した」という表現は御幣があったかもしれませんね。
この裏技(ハックというんでしょうか？)があったおかげで、文書構造と視覚表現を分けたWebサイトを作成することができるようになったのも事実だと思います。
将来の仕様なんて誰も分かりませんから、今ある仕様に沿った形で作るしかないと思っています。

こういったCSSハックによる弊害はまだまだでてくるでしょうし、来年公開される IE7 の動向も分からないのでとりあえずこのままにしておく方向です。

ご回答ありがとうございました。

フォーカスの点線を表示させたくなければ outline: 0 を追加してください。

ありがとうございます。

outline:0; を設定すると点線は消えますが、マウスを使わないで利用しているユーザーが現在どの部分にフォーカスがあるか分からなくなるようです。

text-indent: -xxxxemの弊害
http://www.fsiki.com/jet/archives/2006/ ... ndent.html

もちろんそうです。

私もマウスの代わりに Tab キーを多用する人で、そのことに気付いていますが、
ステータスバーにリンク先が表示されるから気にしてません。

点線が気になる、かつ上記の点も考慮するなら、別の image replacement を
お使いになるのが良いでしょう。