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

Question

在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

p - 段

[...]

允许的内容

短语内容

这个Phrasing内容是什么？措辞内容:

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

普通字符数据就是:未标记的文本.措辞要素是:

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

所以,<p><div></div></p>HTML无效.根据规范中列出的标记省略规则,<p>标记会自动关闭<div>标记,从而使</p>标记不匹配<p>.浏览器完全有权通过<p>在以下内容之后添加开放标记来尝试更正它<div>:

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

你不能放入一个<div>内部<p>并从各种浏览器获得一致的结果.为浏览器提供有效的HTML,它们会表现得更好.

你可以把它<div>放进去<div>,如果你更换你<p>的东西<div class="p">并适当地设计它,你可以得到你想要的.

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

请注意,HTML5也*需要*</ p>`结束标记的行为,导致一个空段落(尽管它可能只是由于现有的浏览器互操作).见http://stackoverflow.com/questions/11570902/why-does-a-stray-p-end-tag-generate-an-empty-paragraph (2认同)

Answer 2

虽然这是一个相当古老的问题,但我认为我会分享我的问题解决方案,以帮助其他可能在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>

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

你说`<p> <span> ... </ span> </ p>`在技术上仍然是无效的HTML,但事实并非如此.`<span>`是一个措辞元素,它在`<p>`里面,并且改变它的显示值不会使HTML无效.[这是另一篇讨论此内容的文章](http://stackoverflow.com/questions/18930438/putting-a-block-level-span-element-inside-ap-element) (4认同)

Answer 3

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

如果您尝试在P中使用DIV,则DIV开始标记将隐式关闭P元素.这可能解释了你所看到的事情.

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