Question

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

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

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

谷歌浏览器：包含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小提琴：https://jsfiddle.net/5jar7ma5/3/

Answer 1

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

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

内部div的链接的自定义焦点轮廓

1 个答案: