为什么<a>内<a>内的<a>表现得如此奇怪？

Question

在我工作的项目中,我遇到了一个<ul>嵌套在<a>标签内的标签(点击事件由JavaScript处理).我尝试<a>在无编号列表中添加另一个标记,发生了一些非常奇怪的事情.

请考虑以下HTML代码:

<a test="foo">
  <ul>
    <li>
      Before link
      <a>Link</a>
      After link
    </li>
  </ul>
</a>

当您检查浏览器工具时,您会看到这实际上是由浏览器呈现的,如下所示:

<ul>实际上并没有被包裹<a>.<a test="foo">标签有三个副本,一个是空的<ul>,前一个是空的<ul>,另一个是包装<li>元素的内容,直到预期<a>Link</a>.

我在Chrome和Firefox中对此进行了测试,两种浏览器都发生了同样的情况.

这里发生了什么？

Answer 1

您的HTML无效.使用验证器.锚不允许是其他锚的后代.

浏览器正在尝试从您的错误中恢复.