将<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标签内。然而，在实践中，这实际上并非完全正确。实际显示值实际上完全不相关; 唯一考虑的是标签的默认显示值，例如div的“block”和跨度的“inline”。更改显示值仍会使浏览器过早关闭p-tag。

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

所以不要这样做：

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

你可以这样做：

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

请记住，浏览器递归地验证p环境的内容，所以即使是这样的：

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

将导致以下结果：

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

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