Chrome 畸形 li > a > ul > li > a HTML

Question

Chrome 似乎无缘无故地改变了我的 HTML 的结构，删除二级锚标记会生成预期的 html 并将其替换为 div或任何其他标签也可以正常工作。 Fiddle

写代码：

<ul>
  <li>
    <a href="/">
      Whatup
      <ul>
        <li>
          <a href="/test/">Yo</a>
        </li>
      </ul>
    </a>
  </li>
</ul>

解释代码：

<ul>
  <li>
    <a href="/">
      Whatup
    </a>
    <ul>
      <a href="/"></a>
      <li>
        <a href="/"></a>
        <a href="/test/">Yo</a>
      </li>
    </ul>
  </li>
</ul>

示例工作代码：

<ul>
  <li>
    <a href="/">
      Whatup
      <ul>
        <li>
          <div>Yo</div>
        </li>
      </ul>
    </a>
  </li>
</ul>

Answer 1

您的内部列表中还有一个 a。这就是导致内部 ul 脱离外部 a 的原因，因为你不能在另一个 a 中包含 a（否则，浏览器不知道如何处理点击内部 a).

换句话说，不是 Chrome 使您的 HTML 畸形——您的 HTML 一开始就是畸形的。

Answer 2

您的HTML无效。你应该使用 a validator.

来自 the a element 的规范：

Content model: Transparent, but there must be no interactive content descendant.

链接是交互式内容（人们应该点击它们来加载新页面）。

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

Chrome 畸形 li > a > ul > li > a HTML

Chrome malforms li > a > ul > li > a HTML

html

google-chrome

html-lists

chromium