Помещение <div> внутрь<p>добавляет дополнительный<p>

Question

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

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

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

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

но когда Rails автоматически генерирует div error_explanation, оборачивая ввод, один абзац превращается в два, и я вижу это в 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

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

п - абзац

[...]

Разрешенное содержание

Фразированное содержание

И что это за фраза? Содержание фразы:

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

Обычные символьные данные - это просто текст без текста. Фразирующими элементами являются:

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

Answer 2

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

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

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

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

Answer 3

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

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

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

Answer 4

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

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