Firefox Anchor大纲问题

Question

下面的代码片段让我很头疼。

<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中，当你通过Tab键浏览链接时，它会在两组文本周围创建轮廓，这两组文本彼此非常接近，并导致重叠的轮廓。

我们的项目管理人员希望保持大纲，以促进可访问性。

如果您在Chrome中查看它，它会将锚点的全部内容包含在一个轮廓中。我们认为这是完美的。我的问题是，是否可以在Firefox中复制这一点。或者至少把它清理干净，这样当Firefox在同一链接中单独列出每个文本项时，它的轮廓看起来不会像粪便。

其他人有没有遇到过这种情况？如果是这样的话，你是如何克服它的？

谢谢

Answer 1

井。这是一个部分解决方案，但在您的情况下可以工作。如果您只对菜单项有问题，您可以将"display: inline-block;“应用于此处的链接，以使其具有共同的轮廓。

示例：jsfiddle.net/zDbsQ/2/

编辑:修复了示例的链接，原来的链接是错误的。

Answer 2

您可以只使用：

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

这将选择a中的所有元素并禁用轮廓。