为什么FIrefox DOM重新排序在外面并添加新的DOM元素？ Chrome不会出现此行为

Question

Firefox DOM将第一个<dialog>重新排列到之外和之下，并在其下方添加一个空 。这不是在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

Answer 1

除了在许多浏览器（Chrome和其他一些基于Chromium的浏览器除外）中'对话'功能是not supported之外，您的HTML无效，因为MDN声明：

允许的父项任何接受流内容的元素

Dialog MDN Docs

你的对话框嵌套在一个元素中，它既是流量和短语内容元素 - > list of flow content elements但only accepts Phrasing content.（另外p只接受pharsing内容）。所以dialog是一个流内容，而span只接受pharsing内容会产生无效的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>

Answer 2

或标签只能包含phrasing content，但对话框是flow content。这会在对话框之前导致段落标记的隐含结束。在这种情况下浏览器的行为不是由于您的HTML无效而定义的规范：他们只能尽力尝试修复您的标记。

为什么FIrefox DOM重新排序在外面并添加新的DOM元素？ Chrome不会出现此行为

问题描述投票：-2回答：2

2个回答

最新问题

为什么FIrefox DOM重新排序 在外面 并添加新的DOM元素？ Chrome不会出现此行为

问题描述 投票：-2回答：2

2个回答

最新问题

为什么FIrefox DOM重新排序在外面并添加新的DOM元素？ Chrome不会出现此行为

问题描述投票：-2回答：2