Firefox 锚点大纲问题
下面的代码片段让我很头疼。
<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>»</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 单独勾画同一链接中的每个文本项时，轮廓就不会看起来像粪便。
还有其他人需要处理这个问题吗？如果有的话，你是怎么克服的？
谢谢
The following snippet is causing me a QA headache.
<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>»</span></a></li>
<li>...etc...</li>
</ul>
</div>
I tried this in CSS, but nothing is working;
#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; }
What's happening is that in Firefox, when you tab through the links, it's creating outlines around both sets of text which have close proximity to each other and are causing overlapping outlines.
Our project mgrs wish to keep the outlines to promote accessibility.
If you view it in Chrome, it will wrap the entire contents of the anchor in an outline. And we consider this to be perfect. My question is, can something be done that can replicate this in Firefox. Or at the very least, clean it up so that the outline doesn't look like dung when Firefox individually outlines each text item in the same link.
Anyone else ever have to deal with this? If so, how'd you get past it?
Thanks
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
出色地。这是一个部分解决方案，但可以适用于您的情况。如果您对菜单项有疑问，则只能应用“display: inline-block;”到这里的链接，使其具有共同的轮廓。
示例： jsfiddle.net/zDbsQ/2/
编辑：修复了示例链接，原始链接错误。
Well. It's a partial solution, but can work in your case. If you you have problem with menu items only you can apply "display: inline-block;" to links in here, to make it have a common outline.
Example: jsfiddle.net/zDbsQ/2/
EDIT: Fixed link to example, original was wrong.
您可以使用：
这将选择 a 中的所有元素并禁用轮廓。
You can just use:
This will select all elements within an a and disable the outline..