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

你可以使用：

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

这将选择a中的所有元素并禁用大纲..

Answer 2

好。这是一个部分解决方案，但可以适用于您的情况。如果您只对菜单项有疑问，可以应用“display：inline-block;”在这里链接，使其具有共同的轮廓。

示例：jsfiddle.net/zDbsQ/2/

编辑：修复了示例链接，原文错误。

Firefox Anchor Outline问题

2 个答案: