display：blockを使用して<a>リンクellementのブラウザサポートに違いはありますか？

Question

以下の3つのボタンに違いがあるのでしょうか？そして、もしあれば、ブラウザはどの領域を正確にクリック可能な領域を含めて扱うのですか？

私が作ったウェブサイトでは、 "my-button-1"のようなリンクボタンをすべて削除し、 "my-button-2"の例のようにAエレメント自体にクラスを追加しました。表示ブロックを使用します。その後、ページビュー/クリック数が減少しました。

表示ブロックでリンク要素を使用すると、古いブラウザに違いはありますか？

<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は不要で、2番目の例のようにaに直接CSSを適用できます。