DIV вырывается из P-тегов - PullRequest
Новая
       12

DIV вырывается из P-тегов

2 голосов
/ 06 сентября 2011

В моем приложении 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> откуда?

1 Ответ

4 голосов
/ 06 сентября 2011

<p> элементы не допускают элементов уровня блока внутри них, поэтому <div class="fieldError> находится снаружи <p class='foo'>.

Я не уверен, почему у вас есть дополнительный тег p нижепервый.Можно ли опубликовать сгенерированный HTML, когда вы просто используете чистый HTML?

Быстрый эксперимент показывает, что вложенные блочные элементы таинственным образом генерируют еще один тег <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>

Похоже, что каждый элемент уровня блока (здесь <div>) выталкивается из любого<p> и создает еще один тег <p> под ним.

Начиная с спецификации :

Элемент P представляет абзац.Он не может содержать элементы уровня блока (включая сам P).

...