html - 浏览器对使用显示 : block; 的 链接元素的支持是否有任何差异

Question

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

在我制作的网站上，我删除了所有链接按钮，例如“my-button-1”示例，并将该类添加到它自己的 A 元素中，就像“my-button-2”示例一样。使用显示 block 。在那之后，我看到页面浏览量/点击量等有所下降。

在使用带显示 block 的链接元素时，旧版浏览器有什么不同吗？

<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

在旧版浏览器中应该没有区别。 display 属性和 block 值已经并且已经得到完全支持。

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