Ввод <div> внутри <p>добавляет дополнительную <p>

Из http://webdesign.about.com/od/htmltags/p/aadivtag.htm

В HTML 4 элемент DIV не может находиться внутри другого элемента уровня блока, как элемент P. Однако в HTML5 элемент DIV может быть найден внутри и может содержать другие элементы содержимого потока, такие как P и DIV.

У меня есть что-то вроде этого внутри формы

<p> <label...> <input...> </p>

но когда Rails автоматически генерирует div_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>

Почему?

Обновление: Я отправил электронное письмо автору статьи, и она внесла соответствующие изменения.

Ответ 1

Из тонкой спецификации:

p - paragraph

[...]

Допустимое содержимое

Содержание фразы

И что это за фразинг? Фразинг контента:

Состоит из элементов фраз, смешанных с нормальными символьными данными.

Нормальные символьные данные - это: текст без знака. Фрагментные элементы:

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, ваша ссылка вводит вас в заблуждение.

Ответ 2

Хотя это довольно старый вопрос, я решил поделиться своим решением проблемы, чтобы помочь другим людям, которые могут наткнуться на эту страницу в Google.

Как уже было сказано, не допускается размещать элементы блока внутри p-тега. Однако на практике это не совсем так. Фактическое отображаемое значение на самом деле совершенно не имеет значения; единственное, что рассматривается, это то, что значение отображения по умолчанию для тега, например. "block" для divs и "inline" для пролетов. Изменение отображаемого значения все равно заставит браузер преждевременно закрыть p-тег.

Однако это также работает наоборот. Вы можете создать тег span, который будет вести себя точно так же, как 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>

Надеюсь, это поможет кому-то:)

Ответ 3

Страница webdesign.about.com просто неверна; они, вероятно, неправильно поняли проекты HTML5. Разрешение DIV внутри P вызывает большую путаницу; Я не думаю, что он даже когда-либо рассматривался во время разработки HTML5.

Если вы попытаетесь использовать DIV внутри P, тег начала DIV будет неявно закрыть элемент P. Это, вероятно, объясняет, что вы видели.

Чтобы избежать проблемы, не используйте P, если содержимое содержит или может содержать элемент DIV. Вместо этого используйте DIV.

Ответ 4

Невозможно поместить элемент <div> внутри <p> в DOM, потому что открывающий тег <div> автоматически закроет элемент <p>.

<p> не разрешит использовать другой элемент внутри него. допускается только <span> и <strong>. В <p></p> мы можем добавлять только теги, связанные с текстом. ссылается на эту ссылку, чтобы узнать больше