将< div>里面< p>正在增加一个额外的< p> [英] Putting <div> inside <p> is adding an extra <p>
问题描述
通过 http://webdesign.about.com/od/htmltags/p/aadivtag.htm
在HTML 4中，DIV元素不能位于另一个块级元素内，例如P元素。
但是，在HTML5中，可以在内部找到DIV元素，并且可以包含其他流内容元素，例如P和DIV。
我在表格里面有这样的内容
< p> <标签...> <输入...> < / p为H.
但是当Rails自动生成一个包装输入的error_explanation div时，一个段落变成两个，我在Firebug中看到了这一点：
< p> <标签...> < / p为H. < DIV ...> <输入...> < / DIV> < p为H. < / p为H.
另外，如果我只是添加一个简单的
< p为H. < DIV>测试< / div> < / p为H.
发生同样的问题（ JSFiddle ），它会在DOM中呈现为
< p> < / p为H. < DIV>测试< / div> < p为H. < / p为H.
为什么？
更新：我通过电子邮件发送了文章的作者，并进行了适当的修改。 href =https://w3.org/tr/html/grouping-content.html#the-p-element =noreferrer>详细规范：
段落
[/ b]
允许的内容
短信内容
这是什么短信内容？ 短语内容：
包含与正常字符数据混合的短语元素。
正常字符数据就是：未标记的文本。 表情元素 a>是：
a 或 em 或 strong em> ... [一堆其他元素，其中没有一个是div ]
所以， code>< p>< div>< / div>< / p> 不是有效的HTML。根据规范中列出的标记省略规则，< div> 标记会自动关闭< p> 标记，这会使< / p> 标记没有匹配< p> 。浏览器完全有权尝试通过在< div> < p> 标签来修正它
< p>< / p>< div>< / div>< p> < / p为H.
您不能放置< div> 在< p> 内，并从各种浏览器获得一致的结果。您可以将< div> 放置在< / p& code>< div> 尽管如此，如果您将< p> 替换为< div class =p> 并且适当地设计它，你可以得到你想要的东西。
From http://webdesign.about.com/od/htmltags/p/aadivtag.htm
In HTML 4, the DIV element cannot be inside another block-level element, like a P element. However, in HTML5 the DIV element can be found inside and can contain other flow content elements, like P and DIV.
I have something like this inside a form
<p> <label...> <input...> </p>
but when Rails auto-generates an error_explanation div wrapping the input, the one paragraph turns into two, and I see this in Firebug:
<p> <label...> </p> <div...> <input...> </div> <p> </p>
Also, if I just add a simple
<p> <div> test </div> </p>
the same issue occurs (JSFiddle) and it gets rendered in the DOM as
<p> </p> <div> test </div> <p> </p>
Why?
Update: I e-mailed the author of the article and she made the appropriate changes.
From the fine specification:
p – paragraph
[...]
Permitted contents
Phrasing content
And what is this Phrasing content? Phrasing content:
Consists of phrasing elements intermixed with normal character data.
Normal character data is just that: unmarked up text. Phrasing elements are:
a or em or strong ... [a bunch of other elements none of which are div]
So, <p><div></div></p> is not valid HTML. Per the tag omission rules listed in the spec, the <p> tag is automatically closed by the <div> tag, which leaves the </p> tag without a matching <p>. The browser is well within its rights to attempt to correct it by adding an open <p> tag after the <div>:
<p></p><div></div><p></p>
You can't put a <div> inside a <p> and get consistent results from various browsers. Provide the browsers with valid HTML and they will behave better.
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 want.
Your reference at about.com disagrees with the specification at w3.org, your reference is misleading you.
这篇关于将< div>里面< p>正在增加一个额外的< p>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
