Chrome 错误格式 li > a > ul > li > a HTML答案

【问题标题】：Chrome malforms li > a > ul > li > a HTMLChrome 错误格式 li > a > ul > li > a HTML
【发布时间】：2017-07-07 11:04:19
【问题描述】：

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>

【问题讨论】：

您不能在 HTML 中嵌套链接。 Chrome 不会“无缘无故”地改变这一点，而是为了纠正你犯的错误。
而且仅供参考，验证您的代码可以帮助您在询问之前找出类似的东西。 validator.w3.org/nu

标签： html google-chrome html-lists chromium

【解决方案1】：

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

换句话说，不是 Chrome 导致您的 HTML 格式错误——您的 HTML 一开始就是格式错误的。

【讨论】：

谢谢，我认为我的 HTML 可能格式不正确，但我什至没有想到 a > * > a 无效，这很有意义。我会尽可能接受你的回答
@Nbody Nbody：公平地说，仅通过查看标记很难发现。这就是为什么定期验证您的标记是一种很好的做法。

【解决方案2】：

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

来自the a element的规范：

内容模型：透明，但不能有交互式内容后代。

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

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

【讨论】：