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

Question

来自 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>

为什么？

---

后来我给文章的作者发了电子邮件，她做了适当的修改。

原文由 Steve 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

从 精细规格：

p——段落

[…]

允许的内容

措辞内容

这个 短语内容 是什么？

措辞内容：

由与 正常字符数据 混合的 短语元素 组成。

普通字符数据 就是：未标记的文本。 措辞要素 有：

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

因此， <p><div></div></p> 不是有效的 HTML。根据规范中列出的标签遗漏规则， <p> 标签自动关闭 <div> 标签，留下 </p> 没有匹配的 <p> 。浏览器完全有权尝试通过在 --- 之后添加一个开放的 <div> <p> 标签来纠正它：

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

您不能将 <div> 放入 <p> 并从各种浏览器获得一致的结果。为浏览器提供有效的 HTML，它们会表现得更好。

You can put <div> inside a <div> though so if you replace your <p> with <div class="p"> and style it appropriately, you can get what you想。

您在 about.com 上的参考与 w3.org 上的规范不一致。你的参考误导了你。

原文由 mu is too short 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

不允许将块元素放入 p 标签中。

然而，在实践中，这实际上并不完全正确。实际显示值实际上完全无关紧要；唯一要考虑的是标签的 默认 显示值，例如 div 的“block”和 span 的“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>

原文由 Daniel Perván 发布，翻译遵循 CC BY-SA 4.0 许可协议