单击链接时，Firefox和IE不会失去焦点，但Chrome会这样做

Question

我有一个锚点列表，其样式可以改变焦点和悬停时的外观。点击它们后，它们应该恢复正常;失去焦点/变得模糊。这在谷歌浏览器中可以正常工作，但在Firefox和IE中没有，它仍然是焦点。为什么会这样？

这是我的代码：http://jsfiddle.net/8fTQs/

我的猜测是FF和IE期望在点击锚点时重新加载页面，但由于这些只是指一个锚点（＃; hash），它不会重新渲染页面（但是如果重新加载它的话）当然会重新渲染并失去焦点。

如何解决这个问题？

谢谢！

编辑：我已经设置了正确的doctype。

Answer 1

您仍然需要:focus样式来帮助keyboard navigation，因此最好不要删除它。

点击后Chrome不会保持焦点，但FF和IE可以。您可以做的是规范化行为，但每次点击时链接都会模糊 - 但只有点击！

一个简单的$('a').click(function () {this.blur();})会模糊元素（模糊=失去焦点）但是当您按 Enter <时，浏览器（或只是jQuery）也会触发“点击”事件/ kbd> key。

因此，快速而肮脏的解决方案是：$('a').mouseup(function () {this.blur();})

Answer 2

即使没有重新加载页面，将锚点对准点击也是正确的行为：它使标签导航在该点之后正常工作。

如果您只想在点击锚点时想要设置样式，那么您似乎想要设置:active个锚点，而不是:focus个样式。

Answer 3

正确的行为是，鼠标单击后，焦点应保留在锚点（正如FF和IE现在所做的那样）。

注册chromium bug已修复，2014年8月14日创建的patch正在审核中。应该在即将到来的更新中得到修复。