在锚父元素bug中锚定孩子

Question

我找到了最荒谬的HTML渲染错误吗？ 如果将一个锚元素放入另一个锚元素中，它将把孩子渲染到它的父母之外：jsfiddle

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

如果将元素更改为span，则可以正常工作。 Same example with span.

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

因为这在chrome，firefox，IE，safari，linux，mac，windows，android上是相同的，我倾向于认为我缺少的锚元素有一个隐藏规则。

Answer 1

由于嵌套的锚元素为invalid HTML，因此大多数浏览器都会尝试并自动为您提供帮助，从而导致：

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

span元素不会发生同样的事情是因为它们可以嵌套，浏览器不会干扰。