Question

我要显示以下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>

内呈现

Answer 1

HTML5规范提供了相关信息：

＆＃34; ...必须没有互动内容后代。＆＃34; source

＆＃34;互动内容＆＃34;描述如下：

＆＃34; a，音频（如果存在控件属性），按钮，细节，嵌入，iframe，img（如果存在usemap属性），输入（如果type属性不处于隐藏状态），keygen，label，菜单（如果type属性处于工具栏状态），object（如果usemap属性存在），select，textarea，video（如果存在controls属性）＆＃34; source

然后，a元素包含div实际上是有效的，只要它不包含上述任何交互元素。这可以通过第一个链接得到肯定，其中可以找到以下内容：

只要内部没有交互式内容（例如按钮或其他链接），a元素可以包裹整个段落，列表，表格等，甚至整个部分。

Chrome会自动错放结束标记

1 个答案: