Chrome 会自动错放结束标记



我要显示以下HTML内容,

<html>
....
....
<body>
<div class="list-group search-results-container"> 
   <a class="list-group-item" href="/raghav">
    <div class="clearfix"> 
      <a class="thumb avatar pull-left m-r"> 
         <img src="/bff63a5c/916c/4d18/841c/58c88c56b65c_cropped.jpg"> 
      </a> 
      <div class="clear"> 
        <div class="m-t-xs"> Raghav G </div> 
      </div> 
    </div>
   </a> 
</div> 
</body>
</html>

我已经验证了 HTML,似乎没有任何错误。但奇怪的是,Chrome 通过提前关闭标签来呈现 HTML,如下所示:

<div class="list-group search-results-container"> 
   <a class="list-group-item" href="/raghav"></a>
   <div class="clearfix"> 
      <a class="thumb avatar pull-left m-r"></a> 
      <img src="/bff63a5c/916c/4d18/841c/58c88c56b65c_cropped.jpg"> 
      <div class="clear"> 
        <div class="m-t-xs"> Raghav G </div> 
      </div> 
   </div>
</div> 

我还对关闭标签的任何错位进行了故障排除,但一切都已正确关闭。Chrome 仅在该特定<div>内呈现为这样

HTML5 规范提供了这方面的信息:

"...不能有交互式内容的后代。

"交互式内容"描述如下:

"a、音频(如果控件属性存在)、按钮、详细信息、嵌入、iframe、IMG(如果存在 usemap 属性)、输入(如果类型属性未处于隐藏状态)、注册机、标签、菜单(如果类型属性处于工具栏状态)、对象(如果存在 usemap 属性)、选择、文本区域、视频(如果存在控件属性)"源

那么,一个a元素包含div实际上是有效的,只要它不包含上面描述的交互元素。第一个链接证实了这一点,其中可以找到以下内容:

a 元素可以环绕整个段落、列表、表格等,甚至整个部分,只要其中没有交互式内容(例如按钮或其他链接)。

最新更新