1

次のスニペットは 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 が同じリンク内の各テキスト項目を個別にアウトライン化するときに、アウトラインが糞のように見えないようにクリーンアップします。

他の誰かがこれに対処する必要がありますか? もしそうなら、どうやって乗り越えましたか？

ありがとう

4

2 に答える 2

0

良い。これは部分的な解決策ですが、あなたの場合にはうまくいきます。メニュー項目のみに問題がある場合は、「display: inline-block;」を適用できます。ここにリンクを張って、共通のアウトラインを持つようにします。

例: jsfiddle.net/zDbsQ/2/

編集:例へのリンクを修正しました。元は間違っていました。

于 2011-11-11T22:39:44.790 に答える
0

あなたはただ使うことができます：

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

これにより、 a 内のすべての要素が選択され、アウトラインが無効になります。

于 2011-11-11T22:34:10.190 に答える