将<div>放在<p>中是添加一个额外的<p>

Question

将<div>放在<p>中是添加一个额外的<p> 

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

在HTML 4中，DIV元素不能位于另一个块级元素内，就像P元素一样。但是，在HTML5中，DIV元素可以在里面找到，并且可以包含其他流内容元素，如P和DIV。

我在表格中有这样的东西

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

但是当Rails自动生成一个包含输入的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>

为什么？

更新：我通过电子邮件发送了文章的作者，并做了相应的更改。

Answer 1

虽然这是一个相当古老的问题，但我认为我会分享我的问题解决方案，以帮助其他可能在Google上偶然发现此页面的人。如上所述，不允许将块元素放在p标签内。然而，在实践中，这实际上并非完全正确。实际显示值实际上完全不相关;&nbsp;唯一考虑的是标签的默认显示值，例如div的“block”和跨度的“inline”。更改显示值仍会使浏览器过早关闭p-tag。然而，这也是相反的方式。您可以设置span-tag的样式，使其行为与div-tag完全相同，但仍然可以在p环境中接受。所以不要这样做：<p> &nbsp;&nbsp;&nbsp;<div>test</div></p>你可以这样做：<p> &nbsp;&nbsp;&nbsp;<span&nbsp;style="display:block">test</span></p>请记住，浏览器递归地验证p环境的内容，所以即使是这样的：<p> &nbsp;&nbsp;&nbsp;<span&nbsp;style="display:block"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div>test</div> &nbsp;&nbsp;&nbsp;</span></p>将导致以下结果：<p> &nbsp;&nbsp;&nbsp;<span&nbsp;style="display:block"></span></p><div>test</div><p></p>希望这会帮助那里的人:)