获取一个空
HTML,输入此内容,并在Google Chrome上查看其源代码：
<p><div> </div>WHY?</p>
如果你像我这样做,你会看到这个来源：
<html> <head></head><body><p> </p><div> </div>WHY?<p></p> </body></html>
以防万一,here’s a demo using jsbin.在那个链接,你看到这样：
[repeating P] WHY? [repeating P]
我已经添加了this jQuery：
$("p").html("[repeating P]");
删除整个< div>从它,一切都恢复正常.在< div>中添加更多的东西时,这个奇怪的意外行为是一致的,它可以是< span>或者我猜这里有什么.如果HTML是否良好,则无关紧要.
有人知道为什么
解决方法
作为一个基本的解释,div意在成为布局的“框”.一个拿着别的东西的盒子然而,p元素是为了(惊喜)一段文本.
因为一个div(容器)被放置在一个p(内联元素)中,它(在技术上)是不正确的.谷歌浏览器(作为标准稍微痴迷的)浏览器,它尝试通过添加额外的元素,如图所示纠正错误的嵌套.
W3C在其网站上有一篇关于这些language specifications的文章(很长的篇幅),但是可能最好的办法是检查不一致之处,并且可能遇到的问题就是验证您的书面源代码.最简单的方法是使用W3C Validator.
