获取一个空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格式良好并不重要。
任何人都知道为什么？
答案 0 :(得分：18)
作为基本解释，div应该是一个＆＃39;框。用于布局。拿着其他东西的盒子。但是，p元素用于（惊讶）一段文本。
因为div（容器）放在p（内联元素）中，所以（技术上）不正确。谷歌浏览器（它是标准略显痴迷的）浏览器，它试图通过添加如图所示的额外元素来纠正这种不正确的嵌套。
W3C在他们的网站上有一篇（很长篇）关于这些language specifications的文章，但是检查不一致性和这样的潜在问题可能是最好的办法是验证你的书面源代码。最简单的方法是使用W3C Validator。
答案 1 :(得分：4)
段落标记用于包含文本，或者更确切地说，包含内联元素。 Chrome将p中的div解释为html畸形，并尝试纠正它。
答案 2 :(得分：1)
我找不到一个好的来源，所以我可能会弄错，但我最近在读的关于未封闭的p标签在技术上是如何有效的html（显然不是有效的xhtml）基本上在适当的情况下他们会关闭自己，只是比如br或hr如何在没有结束标记的情况下自行关闭。即使它们在技术上没有效果，它们显然也会被这种方式使用，以至于它被一些不那么文明的人群认为是可以接受的。格罗斯，我知道。
我认为正在发生的事情是Chrome在p之后看到你的块元素（div），所以它假设你打算让p自我关闭。我假设看到结尾p会触发相同的操作，因为Chrome在遇到结束标记时当前没有打开的p标记。
作为旁注 - 如果它没有打扰你把一个div放在一个p我会建议阅读为什么语义在html中如此重要。我只看了几篇文章 - 我可以建议你快速阅读吗？ http://brainstormsandraves.com/articles/semantics/structure/
答案 3 :(得分：0)
在div中嵌套p是无效的HTML。我猜想Chrome只是想为你纠正它。