次のスニペットは私にQAの頭痛を引き起こしています。Firefoxアンカーのアウトラインの問題
<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>»</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が個別に同じリンク内の各テキスト項目の輪郭を描くときに輪郭が糞のように見えないように、それをきれいにしてください。
誰もこれに対処する必要がありますか?もしそうなら、それをどのように過ぎ去ったのですか?
おかげ
ありがとうアレクセイ!参照のリンクはメニュー項目ではなく、標準リストのリンクのリストです。そのリンクに焦点が当てられるまでFiddleのChromeとタブの例を見ると、Chromeが複数行のリンクを1つのアウトラインとしてどのように表示するかがわかります。 Firefoxは各テキスト項目を別々にラップします。リンクが悪く見えないように、私はChromeがやっていることを達成したいと思います。それも可能ですか? – Skittles
残念ながら、私はWebkitブラウザとして機能する解決策を見つけることができません。おそらく存在しているかもしれませんが、私はそれについてはわかりません。私は例を修正しました(何らかの理由で "display:inline-block;"がありませんでした)、これまでにできたことは最高です。 –
アレクセイ...私はまだあなたが何を変えたのかを見極めようとしていますが、あなたが何をしたかは正確に私が必要なものです!大変ありがとう!優れた仕事! – Skittles