Chrome浏览器中，锚点嵌套在span标签内又嵌套在另一个锚点中的情况。

Question

我在Chrome（和Firefox，我想也是）中遇到了问题。 我有一小段HTML，看起来像这样：

<a id="outside">
    <span id="middle>
        :contents
    </span>
</a>

如果：内容的值是字符串或者除了锚点以外的其他标签，它会按照预期的方式呈现；

<a id="outside">
    <span id="middle">
        inside
    </span>
</a>

或者

<a id="outside">
    <span id="middle">
        <div id="inside"></div>
    </span>
</a>

然而，如果它被解析为锚点，则呈现如下：

<a id="outside">
    <span id="middle>
    </span>
</a>
<a id="inside"></a>

锚点跳到了 span 外面。这是为什么？我该怎么修复它？

- TriesToCommunicateClearly

Answer 1

为了解决这个问题，您必须确保您从未在另一个锚标记中嵌入了一个锚标记——因为它不符合标准，结果是不可预测的。

如果您可以控制生成的代码，请确保通过用可以包含div和a标记的其他div元素来替换顶级锚定，来整理HTML。

参考：

• http://www.w3.org/TR/html401/struct/links.html#h-12.2
• http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-a-element
• http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element

- technophobia

---

截至HTML5（除非我上次查看时有所变化），在a元素内部包含块级元素是完全有效的。 - David Thomas

你的评论是完全正确的 - 我会从答案中删除那一点。 - technophobia

谢谢。'外部'锚点是我决定使用的解决方案的一部分，用于为span的内容提供工具提示。我想我将不得不找到另一个解决方案。 - TriesToCommunicateClearly

Answer 2

这可能是因为您的浏览器正在尝试“修复”非法的HTML。根据W3文档：

12.2.2 Nested links are illegal

Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.

Since the DTD defines the LINK element to be empty, LINK elements may not be nested either.

这是文档链接: http://www.w3.org/TR/html4/struct/links.html#h-12.2.2

- Michael Freake