Firefoxアンカーのアウトラインの問題

Question

次のスニペットは私にQAの頭痛を引き起こしています。

<div id="links-container"> 
    <ul> 
    <li class="resource-link li-sep"><a href="http://www.somesite.com/members/category/?catID=8" target="_blank"><em>Enjoy family-friendly</em>ACTIVITIES AND ATTRACTIONS <span>&raquo;</span></a></li> 
    <li>...etc...</li> 
    </ul> 
</div> 

私はCSSでこれを試しましたが、何も問題はありません。何が起こっている

#links-container ul li a { color:#C28234; } 
#links-container ul li a span { font-size:140%; line-height:1em; } 
#links-container ul li a em { display:block; font-family:Georgia; font-weight:normal; margin-bottom:-6px; } 
#links-container ul li a:focus em, #links-container ul li a:active em { outline:none; } 
#links-container ul li a:hover { color:#75450A; } 

は、リンクを介して、あなたのタブ、それは互いに近接しており、重複アウトラインを引き起こしているテキストの両方のセットの周りにアウトラインを作成していますFirefoxの、であることです。

私たちのプロジェクトマネージャーは、アクセシビリティを促進するためにアウトラインを維持したいと考えています。

Chromeで表示すると、アンカーのコンテンツ全体がアウトラインに囲まれます。そして、これは完璧だと考えています。私の質問は、Firefoxでこれを複製できる何かができるかどうかです。または、少なくとも、Firefoxが個別に同じリンク内の各テキスト項目の輪郭を描くときに輪郭が糞のように見えないように、それをきれいにしてください。

誰もこれに対処する必要がありますか？もしそうなら、それをどのように過ぎ去ったのですか？

おかげ

Answer 1

。これは部分的な解決策ですが、あなたのケースでは動作します。メニュー項目に問題がある場合は、 "display：inline-block;"を適用することができます。ここにリンクを張って共通の概要を作ります

例：jsfiddle.net/zDbsQ/2/

EDIT：例に固定されたリンクは、元のは間違っていました。

Answer 2

あなただけ使用することができます。これは、A内のすべての要素を選択して、アウトラインを無効にします

#links-container ul li a *{ outline: none; } 

...まあ