内部带有 div 的链接的自定义焦点大纲答案

【问题标题】：Custom focus outline for links with div inside内部带有 div 的链接的自定义焦点大纲
【发布时间】：2018-05-29 15:17:01
【问题描述】：

我的任务是更改当前具有焦点的元素（链接、按钮等）的焦点轮廓（使其高度可见）。

该网站有很多内容复杂的链接。链接元素中的 div 很常见。但据我了解，链接元素中的 div 在 html5 中是可以的（如果我错了，请纠正我）。

如果我保留默认轮廓（例如 Firefox 中的虚线），它在大多数浏览器（不是 IE）中都可以正常工作。它将显示在链接的边框周围。但如果我应用自己的大纲，它就会开始表现得很奇怪：

Google Chrome：包含 div 的链接根本没有轮廓。
Firefox：显示了轮廓，但它的形状看起来很真实很奇怪。
Internet Explorer：包含 div 的链接在全部（即使我保留默认设置也不会）。
Microsoft Edge：链接包含一个 div 根本没有轮廓。
Opera：包含一个 div 根本没有轮廓。

我做错了吗？

这是一个例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Test 3</title>
        <style>
            .custom-focus:focus {
                outline: #fa0 solid 2px;
            }
        </style>
    </head>
    <body>
        <a href="#">Link A1 (Link with just text, default focus outline)</a>
        <br />
        <a href="#" class="custom-focus">Link A2 (Link with just text, custom focus outline)</a>
        <br />
        <a href="#">
            <div>Link B1(Link with div inside, default focus outline)</div>
        </a>
        <br />
        <a href="#" class="custom-focus">
            <div>Link B2(Link with div inside, custom focus outline)</div>
        </a>
    </body>
</html>

我还使用相同的代码创建了一个 JS fiddle：https://jsfiddle.net/5jar7ma5/3/

【问题讨论】：

a 包装 img 的类似问题：stackoverflow.com/q/27068669/923560
@haagel，你有没有找到解决方案？我刚遇到同样的事情......

标签： html css

【解决方案1】：

检查将 css 显示更改为“inline-block”是否可以解决问题。

.custom-focus { display:inline-block; } .custom-focus:focus { 大纲：#fa0 solid 2px; }

【讨论】：