1

これに対する簡単な解決策はない可能性がありますが、回避策の提案や、この問題/動作に関するドキュメントへのポインタは大歓迎です。

シナリオ: 次のようなカスタムのオンフォーカス CSS スタイルを適用した場合:

:focus {outline: 2px auto green; }

問題: フォーカスが移動した後でも、以前にアクティブだったリンクにアウトラインの一部が表示されたままになります。

スクリーンショットでは、緑色のアウトラインの最後のリンクが現在アクティブな要素です。周りに小さな緑色の線が付いている残りのリンクは、以前はアクティブでした。

ここに画像の説明を入力

アウトラインのこれらの残りの部分は、数秒後に単独で、またはマウスをそれらの上にドラッグすると (または他の方法でページのその領域を乱すと) 消えます。

Context :アクセシビリティのためのクロム拡張に取り組んでおり、アクティブな要素に明示的なスタイルを設定する必要があります。私が Outline-style:auto を使用したい理由は、1) auto 以外の他のスタイル ("solid"、"dotted" など) を適用すると別の問題が発生し、2) 見栄えが良くなるためです。

Outline-style:auto が他のブラウザーでサポートされていないことは承知しています。

Chrome 27 を使用しています。

4

2 に答える 2

0

Outline-offset が設定されているかどうかを確認できます。

同様の問題がありました.Bootstrapを使用していて、設定していました:

a:focus {outline-offset: -2px;}

Bootstrap を使用しているようには見えませんが、同様のことが起こっている可能性があります。デフォルトに戻しました：

a:focus {outline-offset: 0px;}

それは私のために働くようでした。お役に立てれば！

(警告、outline-offset は IE ではサポートされていません: http://www.w3schools.com/cssref/css3_pr_outline-offset.asp )

于 2014-07-23T14:11:40.797 に答える
0

同じ問題がありました。私の場合は、アウトラインとボックス シャドウを設定します。どちらも要素にこだわっているようでした。

アウトラインを追加するときに、ボックスの位置も「相対」に設定して目立つようにしました。説明できない何らかの理由で、位置を相対的に設定するときにボックスに1のz-indexを与える（前方に移動する）と、この問題が完全に修正されました。

于 2015-02-05T23:06:01.197 に答える