如何删除Firefox链接中的虚线轮廓而不会损害可访问性?

时间:2016-01-28 18:35:07

标签: css google-chrome firefox

关于如何删除Firefox中javascript / ajax链接上的虚线轮廓有很多问题/答案,但是他们都建议将outline属性设置为0,这会损害可访问性。此外,它避开了这个问题:Firefox焦点行为是问题,而不是焦点的样式。

在Chrome中,点击ajax链接不会产生焦点。它只在你开始标记时开始聚焦。另一方面,Firefox会在您单击鼠标时积极地放置焦点。

通过鼠标点击设置焦点,有没有办法让Firefox更像Chrome,而不必通过将outline设置为none0来牺牲辅助功能

可以在http://news.yahoo.com上看到此效果的示例。在FF中,如果您向下单击左侧的链接(但在单击释放之前将鼠标移离链接),您将看到虚线轮廓。在Chrome中如果你这样做,你将看不到轮廓,但是一旦你开始点击tab

有没有办法强迫FF有类似的行为?

还有一个相关的问题:你如何在Firefox中一致地重现这种虚线轮廓行为? Firefox似乎没有对所有链接执行此操作,并且它似乎仅在某些情况下发生。

例如,尽管没有outline覆盖,但StackOverflow上的大多数链接都没有此问题。

2 个答案:

答案 0 :(得分:0)

听起来你只需要抑制当前被点击的链接上的轮廓。



a:active {outline:none}

<p><a href="#1">Link 1</a></p>
<p><a href="#2">Link 2</a></p>
<p><a href="#3">Link 3</a></p>
<p><a href="#4">Link 4</a></p>
&#13;
&#13;
&#13;

如果不是这样,请告诉我们,我们可以努力寻求更完整的解决方案!

答案 1 :(得分:0)

使用类似这样的内容:

a::-moz-focus-inner
{
    outline: none;
    border-color: transparent;
}

边界颜色是Firefox中的虚线,是的,没有意义,但是就是这样。