我要显示以下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 元素可以环绕整个段落、列表、表格等,甚至整个部分,只要其中没有交互式内容(例如按钮或其他链接)。