理想情况下，:focus样式应仅在使用标签时可见，但Firefox和Chrome也会在点击后显示。此外，Firefox and Chrome differ in their focus behavior on click：Firefox将重点放在链接上，而Chrome会将其保留在按钮上。
<a href="/page">This links stays focused after a click in Firefox</a>
<button>This button stays focused after a click in Chrome</button>
此行为成为问题：
:focus会覆盖指示菜单中当前页面的类一种可能的解决方案是通过模糊点击的元素来规范浏览器的行为（种类）。
function blurElement () {
this.blur();
}
//I'm using onmouseup because onclick is also fired on [enter]
document.getElementsByTagName('a')[0].onmouseup = blurElement;
document.getElementsByTagName('button')[0].onmouseup = blurElement;
这样可以吗？可访问性会受到影响吗？
Demo, test tables, real-world scenarios and possible fix on CodePen
答案 0 :(得分：1)
不幸的是，无法发表评论，因为我是stackoverflow的新手。我想对你的特定用例进行一些澄清，但这是一个普遍的答案。
元素
你不应该对任何不是真正链接的东西使用'a'标签，即它转到另一个页面，或者转到一个链接的名称（使用#namedlinked），两者都会改变你的焦点。如果您正在更改页面内的内容（例如显示/隐藏链接，Web应用程序导航），即使您将其设置为看起来像链接，也应始终使用按钮。
实际上，如果您希望自己的网站可以访问，这可以追溯到您应该以语义正确的方式使用HTML元素的指南。
按钮
如果您有按钮，则Chrome代码集的幻灯片示例中的Chrome行为不正确。不要忘记在伪类列表中，除了：hover和：focus之外，还有：active。
这是一个简单的例子：
button:focus {
border-color: green;
color: green;
}
button.a:active {
background: red;
}
这样的东西总是会在焦点上（在点击之前或之后）具有样式，然后任何带有“a”类的按钮都会在点击它时使你的按钮变红。请参阅http://jsfiddle.net/434ps28f/5/
上的快速演示在Chrome和Firefox（最新的Windows版本）中，这与我的工作方式完全相同。
关于另一个例子：focus重写.current。只要用户专注于该元素，它就应该这样做。这就是用户如何知道他们仍然关注那里。一旦焦点偏离该元素。仍然会应用当前。
我不建议，但如果由于某种原因你想让用户看到.current样式而不管它们是否有焦点，那么你可以添加一个额外的规则：
.current {
border-color: orange;
}
.current:focus {
border-color: orange;
}
答案 1 :(得分：0)
您提供的blurElement（）方法/解决方案绝对不利于可访问性。通过键盘控件激活链接或按钮时，blurElement（）方法会模糊焦点并且用户会失去键盘焦点。焦点被抛回窗口，用户必须返回到他们所在的位置 - 这对键盘用户来说非常令人沮丧。
FF和Chrome之间的链接和按钮焦点问题很烦人，但我不会称它们为showstopper。