把<div>放在<p>里面是增加一个额外的<p>

来自http://webdesign.about.com/od/htmltags/p/aadivtag.htm

在HTML 4中，DIV元素不能位于另一个块级元素内，如P元素。但是，在HTML5中，可以在内部findDIV元素，并且可以包含其他stream内容元素，例如P和DIV。

我在表格里面有这样的东西

<p> <label...> <input...> </p>

但是当Rails自动生成包装input的error_explanation div时，一个段落变成了两个，我在Firebug中看到了这个：

 <p> <label...> </p> <div...> <input...> </div> <p> </p>

另外，如果我只是添加一个简单的

 <p> <div> test </div> </p>

发生同样的问题（ JSFiddle ），并在DOM中呈现

 <p> </p> <div> test </div> <p> </p>

为什么？

更新：我通过电子邮件发送了文章的作者，并作出了适当的修改。

从精细的规格：

p段

[…]

允许的内容

短语内容

这是什么措辞的内容 ？短语内容：

由正常字符数据混合的措辞元素组成。

普通的字符数据就是：未标记的文本。 表情元素是：

a或em或strong … [其他一些元素都不是div ]

所以， <p><div></div></p>不是有效的HTML。根据规范中列出的标签遗漏规则， <p>标签会被<div>标签自动closures，这会使</p>标签没有匹配的<p> 。浏览器完全可以通过在<div>之后添加一个打开的<p>标签来修正它：

 <p></p><div></div><p></p>

你不能把一个<div>放在一个<p>并且从不同的浏览器得到一致的结果。提供有效的HTML浏览器，他们会performance得更好。

你可以把<div>放在一个<div>但是如果你用<div class="p">replace你的<p> ，并且设置得当，你可以得到你想要的。

您在about.com的引用不同意w3.org上的规范，您的引用会误导您。

虽然这是一个相当古老的问题，但我想我会分享我的解决scheme，以帮助其他人可能偶然发现在谷歌上的这一页。

如前所述，不允许在p-tag内部放置块元素。但实际上这并不是完全正确的。实际的展示价值实际上是完全不相关的; 唯一要考虑的是标签的默认显示值，例如div的“block”和span的“inline”。更改显示值仍然会使浏览器提前closuresp-tag。

但是，这也是相反的。您可以将span-tag的样式设置为与div-tag完全相同，但仍然可以在p环境中接受。

所以不要这样做：

 <p> <div>test</div> </p>

你可以这样做：

 <p> <span style="display:block">test</span> </p>

只要记住，浏览器recursion地validationp环境的内容，所以即使是这样的：

 <p> <span style="display:block"> <div>test</div> </span> </p>

将导致以下结果：

 <p> <span style="display:block"></span> </p> <div>test</div> <p> </p>

希望这会帮助那里的人:)

webdesign.about.com页面是错误的; 他们可能误解了HTML5的草稿。允许P内的DIV会造成很大的混乱; 我不认为它在HTML5开发过程中曾经被考虑过。

如果您尝试在P内使用DIV，则DIV开始标记将隐式closuresP元素。这可能解释你看到的东西。

为避免此问题，如果内容包含或可能包含DIV元素，请不要使用P. 改用DIV。

在DOM中放置一个<div>元素是不可能的，因为开放的<div>标签会自动closures<p>元素。

里面不允许其他元素。只允许<span>和<strong>元素。在<p></p>我们只能添加文本相关的标签。参考这个链接了解更多