渲染多个嵌套标签的浏览器答案

【问题标题】：Browsers rendering multiple nested a tags渲染多个嵌套标签的浏览器
【发布时间】：2014-04-04 21:12:17
【问题描述】：

想象一下这段 HTML：

<a href="/somewhere/">
    <div class="nested">
        <div class="sub-nested">
            <div class="sub-sub-nested">
                <a href="/else/">button</a>
            </div>
        </div>
    </div>
</a>

这在我的浏览器中呈现如下：

<a href="/somewhere/"></a>
<div class="nested">
    <a href="/somewhere/"></a>
    <div class="sub-nested">
        <a href="/somewhere/"></a>
        <div class="sub-sub-nested">
            <a href="/somewhere/"></a>
            <a href="/else/">button</a>
        </div>
    </div>
</div>

仅当外部a 标记内有另一个a 标记时才会发生这种情况。

我完全不明白为什么会这样。这怎么可能。这让我发疯了。

这个问题看起来很简单，我想知道我误解的 HTML 标准是什么？毕竟，从 HTML5 开始，a 标记中不应该允许任何标记吗？

我在这里错过了什么？

【问题讨论】：

先生，我完全不知道您在说什么。
你不能嵌套锚标签，不管它们之间有什么。
啊，谢谢你让我焕然一新。在研究时，我遇到了stackoverflow.com/questions/3379392/…，在那里我阅读了第一个答案的 80% 并得出结论，这一定是可能的。现在我重新阅读它并意识到这是不可能的。

标签： html

【解决方案1】：

你不能下一个锚标签。作为W3 says：

12.2.2 嵌套链接是非法的

A 元素定义的链接和锚点不能嵌套；一个A 元素不得包含任何其他 A 元素。

【讨论】：

我现在觉得很违法。我最好快点修好。谢谢！

【解决方案2】：

如果你尝试validate你的代码，你会得到

此处的文档类型不允许元素“div”； (...)

此消息的一个可能原因是您试图将内联内的块级元素（例如“<p>”或“<table>”）元素（例如“<a>”、“<span>”或“<font>”）。

所以你不能将<div> 放在<a> 中。

【讨论】：

【解决方案3】：

进一步解释为什么不能嵌套 A 标记，浏览器不知道将用户引导到哪里，因为多个 A 标记将具有多个 HREF 属性。这就是为什么嵌套A标签是非法的。

【讨论】：