Почему FIrefox DOM переупорядочивает <dialog>вне <p>и добавляет новый элемент DOM? Chrome не демонстрирует это поведение - PullRequest
Новая
       11

Почему FIrefox DOM переупорядочивает <dialog>вне <p>и добавляет новый элемент DOM? Chrome не демонстрирует это поведение

0 голосов
/ 27 марта 2019

Firefox DOM переупорядочивает первый снаружи и ниже

и добавляет пустой

под ним.Это не происходит в Chrome / Vivaldi.

Это нормальное поведение? 

<!DOCTYPE html>
<html>
<head>
<style>
.note-toggle:checked ~ .note-content { display: block; }
</style>
</head>

<body>

<p>
Here's a paragraph
<span><label for="note" class="noteLabel"><sup>Note</sup></label>
<input type="checkbox" id="note" class="note-toggle" style="display: none;">
<dialog class="note-content">
This is moved outside of the &lt;p>&lt;/p> in Firefox DOM and an extra &lt;p>&lt;/p> added below in DOM. Works fine in Chrome.
</dialog>
</span>
</p>


<div>
Here is another paragraph
<span><label for="note2" class="noteLabel"><sup>Note</sup></label>
<input type="checkbox" id="note2" class="note-toggle" style="display: none;">
<dialog class="note-content">
Works fine if &lt;div> or &lt;span> or nothing is used. Also works fine in Chrome.
</dialog>
</span>
</div>

</body>
</html>

Firefox DOM Result

Ответы [ 2 ]

2 голосов
/ 27 марта 2019

Помимо того факта, что функциональность 'dialog' не поддерживается , но во многих браузерах (кроме Chrome и некоторых других браузеров на основе Chromium) ваш HTML-код недопустим, поскольку, как указано в MDN:

Разрешенные родители Любой элемент, который принимает содержимое потока

Диалог MDN Документы

ваше диалоговое окно вложено в элемент <span>, который является как потоком, так и элементом фразового содержимого -> список элементов содержимого потока , но принимает только фразовое содержимое. (Также p принимает только фарсирующий контент). Таким образом, dialog является потоковым контентом, а span принимает только фарсирующий контент, генерирует недопустимую структуру HTML.

Известно, что Chrome и другие браузеры на базе Chromium более «прощающие», чем Firefox и другие. Я предлагаю вам изменить структуру HTML, чтобы она соответствовала официальным документам. Вы можете проверить свою HTML-структуру онлайн. Для начала было бы неплохо сделать небольшой отступ:)

Таким образом, поведение в FF является «нормальным».

Ваша HTML структура должна выглядеть как 

<p>
  Here's a paragraph
  <span>
    <label for="note" class="noteLabel">
        <sup>Note</sup>
    </label>

    <input type="checkbox" id="note" class="note-toggle" style="">
  </span>
</p>
<dialog class="note-content">
  This is moved outside of the p in Firefox DOM and an extra p added below in     DOM. Works fine in Chrome.
</dialog>
0 голосов
/ 27 марта 2019
Теги

<p> или <span> могут содержать только формулировку контента , но диалог flow content . Это приводит к подразумеваемому концу тега абзаца перед диалогом. Поведение браузера в этой ситуации не определено, поскольку ваш HTML-код недействителен: они могут только приложить все усилия, чтобы исправить вашу разметку.

A venn diagram describing the relationship between types of content in HTML

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...