Chrome中<p>内嵌<a>标签导致页面渲染异常问题求助

问题代码 #

以下HTML代码会出现异常渲染：

<a href="https://five-pillars-simulator.luisafk.repl.co" target="fivepillarssmiluator" class="card dfc tc mw m40 cb tdn">
  <h2 class="card-title">
    Five Pillars Simulator
  </h2>
  <p class="card-body tj">
    A History Project me and <a href="https://replit.com/@gabrielo4">Gabe</a> made for a school History project.
  </p>
</a>

异常表现 #

• 外层<a>标签被重复渲染
• <p>标签内容被拆分，页面显示错乱：
  
• Chrome开发者工具中可见异常DOM结构：
  

问题根源 #

经测试确认，问题出在<p>标签内部嵌套的<a>标签。HTML规范中，<p>属于块级元素，仅能包含短语内容，不允许嵌套交互式元素（如另一个<a>）。浏览器为修正不符合规范的嵌套结构，会自动拆分DOM，最终导致外层链接重复、段落内容被拆分。

解决方案 #

移除<p>内部的嵌套<a>标签后，页面渲染恢复正常，符合预期：

若需保留对“Gabe”的链接，可将<p>替换为允许嵌套交互式元素的<div>，示例代码如下：

<a href="https://five-pillars-simulator.luisafk.repl.co" target="fivepillarssmiluator" class="card dfc tc mw m40 cb tdn">
  <h2 class="card-title">
    Five Pillars Simulator
  </h2>
  <div class="card-body tj">
    A History Project me and <a href="https://replit.com/@gabrielo4">Gabe</a> made for a school History project.
  </div>
</a>

内容的提问来源于stack exchange，提问作者LuisAFK