html - DIV跳出P标签

Question

在我的 Grails 应用程序中，我有一个带有以下标记的 GSP:

<p class='foo'>
  <label>Email</label>
  <g:textField id="email" name="email" class="field required email"
      title="Please enter a valid email address" maxlength="50" value="${signUp?.email}"/>
  <g:eachError bean="${signUp}" field="email">
    <div class="fieldError"><g:message error="${it}"/></div>
  </g:eachError>
</p>

<label>Your Age:</label>

当电子邮件字段有错误时，将生成以下 HTML:

<p class="foo">
  <label style="width: 100px;">Email</label>
  <input id="email" class="field required email" type="text" value="" maxlength="50" title="Please enter a valid email address" name="email" style="width: 275px;">
</p>
<div class="fieldError" style="margin-left: 155px;">No email was provided</div>
<p></p>
<label style="width: 100px; vertical-align:middle;">Your Age:</label>

我想不通:

• 为什么 <div class="fieldError>出现在外面<p class='foo'>
• <p></p> 在哪里从哪里来？

Answer 1

<p>元素不允许在其中包含 block 级元素，所以这就是为什么 <div class="fieldError>在外面<p class='foo'> .

我不确定你为什么有一个额外的 p第一个下面的标签。当你只使用纯 HTML 时，你能发布生成的 HTML 吗？

---

快速实验表明嵌套 block 元素神秘地生成另一个 <p> FF6、Chrome 13 和 Opera 11.51 中的标签

这是输入的代码:

<p>
    P
    <div>
        DIV1
        <div>
            DIV1a
        </div>
    </div>
</p>

这是输出:

<p>P</p>
<div>
    DIV1
    <div>
        DIV1a
    </div>
</div>
<p></p>

似乎每个 block 级元素(此处为 <div> )都被推出任何 <p>标记，并创建另一个 <p>标记在它下面。

来自 the specification :

The P element represents a paragraph. It cannot contain block-level elements (including P itself).