IE 和 Chrome：css 自定义大纲问题答案

【问题标题】：IE and Chrome: css custom outline issueIE 和 Chrome：css 自定义大纲问题
【发布时间】：2016-09-29 13:45:35
【问题描述】：

我正在尝试为按钮创建自定义轮廓，但我遇到了 Chrome、IE 和 Edge 的问题。

查看此代码笔：http://codepen.io/alansouzati/pen/dXEWLB

.custom:focus {
  outline: black solid 2px;  
}

.custom:active,
.custom:hover,
.custom:visited {
  outline: 0;
}

在 Safari 和 Firefox 中，我得到了预期的行为。

要对其进行测试，请单击第二个按钮（自定义焦点）。在 IE 和 Edge 中，即使我没有按制表符，我也会得到大纲。在 Safari 和 Firefox 中，大纲仅在我按 Tab 时显示，而不是在我单击按钮时显示。

关于如何为 Chrome 和 IE 解决此问题的任何建议？

【问题讨论】：

标签： css google-chrome internet-explorer focus outline

【解决方案1】：

您可以在 jQuery 中使用 .blur() 来避免单击按钮后聚焦。

function myFunction() {
  alert('hi');
}

$(".custom").click(function(e) {
  $(this).blur();
  myFunction();
});

.custom:focus {
  outline: black solid 2px;  
}

.custom:active,
.custom:hover,
.custom:visited {
  outline: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" onclick="myFunction()">Default focus</button>
<br/>
<br/>
<button type="button" class="custom">Custom focus</button>

【讨论】：

我的项目中没有 jQuery。我也觉得从按钮上移开焦点很奇怪
如果你不使用 jQuery，你可以试试这个：
谢谢，模糊的问题实际上是使用标签。如果我点击按钮，然后按 Enter 5 次，我希望该按钮被点击 5 次。使用这种模糊策略，它只会被点击一次。

【解决方案2】：

您的 CSS 可以简化为

.custom:focus:not(:active) {
  outline: black solid 2px;  
}

然后Edge会像Chrome一样渲染轮廓，这让我觉得问题与Edge中CSS selector specificity的处理有关。

更新的 Codepen：http://codepen.io/anon/pen/EgvYPR

但是请注意，在您的示例中，当我用鼠标单击第二个按钮，然后在释放它之前将光标移到按钮之外时，即使未按下 Tab 键也会出现轮廓：所有浏览器中的行为相同。如果这不是故意的，我建议您切换到 JavaScript 解决方案。

【讨论】：

这种行为不是我所期望的。实际上，我决定按照这篇文章中提供的说明进行操作：marcysutton.com/button-focus-hell。这符合您使用 Javascript 解决焦点问题的建议。