Firefox Anchor Outline Issue - PullRequest
Новая
       17

Firefox Anchor Outline Issue

1 голос
/ 12 ноября 2011

Следующий фрагмент вызывает у меня головную боль 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, когдаВы переходите по ссылкам, это создает контуры вокруг обоих наборов текста, которые находятся в непосредственной близости друг от друга и вызывают наложение контуров.

Наш проект mgrs хочет сохранить контуры для обеспечения доступности.

Если вы просматриваете его в Chrome, он обернет все содержимое якоря в контур.И мы считаем это идеальным.У меня вопрос, можно ли что-то сделать, чтобы повторить это в Firefox.Или, по крайней мере, очистите его, чтобы контур не был похож на помет, когда Firefox по отдельности выделяет каждый текстовый элемент в одной и той же ссылке.

Кто-нибудь еще сталкивался с этим?Если так, как ты прошел через это?

Спасибо

Ответы [ 2 ]

0 голосов
/ 12 ноября 2011

Хорошо. Это частичное решение, но может работать в вашем случае. Если у вас есть проблемы только с пунктами меню, вы можете применить «display: inline-block;» чтобы ссылки были здесь, чтобы у них была общая схема.

Пример: jsfiddle.net / zDbsQ / 2 /

РЕДАКТИРОВАТЬ: Исправлена ​​ссылка на пример, оригинал был неправильным.

0 голосов
/ 12 ноября 2011

Вы можете просто использовать: 

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

Это выберет все элементов в a и отключит контур ..

...