使用 display: block; 的浏览器对 <a> link 元素的支持是否有任何差异？

Question

我想知道以下3个按钮之间是否有任何区别。如果有的话，浏览器如何处理它们，包括哪个区域是完全可点击的？

在我制作的网站上，我删除了所有 link 按钮，例如 "my-button-1" 示例，并将 class 添加到它自己的 A 元素中，就像 "my-button-2" 例子。使用显示块。在那之后，我看到 page-views/clicks 等下降了。

使用带显示块的 link 元素时，旧版浏览器有什么不同吗？

<a href="http://example.com">
    <div class="my-button-1">
        Click here
    </div>
</a>

<a href="http://example.com" class="my-button-2">
    Click here
</a>

<div class="my-button">
    <a href="http://example.com">
        Click here
    </a>
</div>

.my-button-1 {
    background-color: yellow;
    height: 50px;
    width: 200px;
}

a.my-button-2 {
    display: block;
    background-color: yellow;
    height: 50px;
    width: 200px;
}

.my-button-3 a {
    display: block;
    background-color: yellow;
    height: 50px;
    width: 200px;
}

Answer 1

旧版浏览器应该没有区别。显示属性和块值已经完全支持。

在这种情况下，您不需要内部 div 并且可以像第二个示例一样将 CSS 直接应用于 a。

使用 display: block; 的浏览器对 <a> link 元素的支持是否有任何差异？

Are there any differences in browser support for <a> link ellement using display: block;

html

css

cross-browser

hyperlink