1

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

<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

您可以使用：

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

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

于 2011-11-11T22:34:10.190 回答
0

好。这是部分解决方案，但可以在您的情况下使用。如果您仅对菜单项有疑问，则可以应用“display: inline-block;” 到这里的链接，使它有一个共同的轮廓。

示例：jsfiddle.net/zDbsQ/2/

编辑：固定链接到示例，原来是错误的。

于 2011-11-11T22:39:44.790 回答