アンカー親エレメント内の子をアンカーするbug - html、browser、html-rendering

最もばかげたhtmlレンダリングのバグを見つけましたか？ アンカー要素を別のアンカー要素に配置すると、子はその親の外側にレンダリングされます。 jsfiddle

 <a id="parent" href="#">
<a class="child" href="#">Child</a>
</a>

要素をスパンに変更すると、正常に機能します。 スパンの同じ例。

<span id="parent">
<span class="child" href="#">Child</span>
</span>

これはchrome、firefox、IE、safari、linux、mac、windows、androidでも同じなので、欠落しているアンカー要素には隠されたルールがあると思う傾向があります。

回答：

ネストされたアンカー要素は 無効なHTML、ほとんどのブラウザは、それを自動的に修正しようとします。その結果、次のようになります。

<a id="parent" href="#"></a><a class="child" href="#">Child</a>

スパン要素で同じことが起こらない理由は、それらをネストすることができ、ブラウザが干渉しないためです。