为什么 Chrome 没有正确解释我的 HTML 而 Canary/Safari 是？

Question

我使用 Chrome 作为我的默认导航器，有一段时间了，每当我需要阅读一些苹果文档时，我都不得不求助于其他浏览器（或像 Dash 这样的外部工具），因为 Apple在 Chrome.

上，文档菜单样式对我来说只是损坏

不寻常的是，它似乎不是 CSS 不兼容问题，但似乎没有根据页面的 HTML 创建 DOM。

例如，这个 doc page 有这个 HTML 的菜单：

<menu id="bashful" type="toolbar">
  <div class="shield"></div>
  <menuitem id="jump_to" class="menu-bar-item closed">
  <span>On This Page</span>
  <div class="chevron"> ... </div>
  <menu type="list" class="details">
      <ul class="list-bullet">
          <li class="item">
            <a href="#//apple_ref/doc/uid/TP40014097-CH8-ID106">Mutability of Collections</a>
          </li>

          ... 

      </ul>
  </menu>
</menuitem>

</menu>

忽略他们糟糕的缩进，很明显所有菜单项都在 <menuitem> 标签内，但是当检查我的 chrome 元素标签时，它没有显示，它显示 <span> 和 <menu> 标签都在它外面，使得很多 CSS 选择器规则停止应用。

这是它在 Chrome 上的显示方式（有问题）

和Chrome金丝雀（正常工作），

此测试是使用以下浏览器版本完成的

Chrome 版本 45.0.2454.101（64 位）- 中断
Chrome Canary 版本 48.0.2528.0 canary（64 位）- 有效
Firefox 40.0.3 - 有效
Safari 版本 8.0.8 (10600.8.9) - 有效

首先我怀疑这是一个简单的浏览器不兼容问题，所以我试图复制这个问题，要求其他使用相同浏览器的人来测试 Apple 文档 link，但到目前为止我是唯一一个有了这个 "problem"

我也试过了：

禁用所有浏览器扩展
Disabled/Clear 所有浏览器缓存
比较浏览器下载的 HTML 和 CSS 资源，但它们是相同的
我创建了 a codepen with just this piece of HTML 如果您想要一个简单的 HTML 以便更好地分析
我检查了 <menuitem> on mdn，label 属性似乎是“Required when a command attribute is not present”，但这足以破坏 Chrome 上的所有内容吗？ Apple 是否将 <menuitem> 用于规范中预期以外的目的？

好吧，有人知道这个烦人的问题可能是什么原因以及可能的解决方案吗？

Answer 1

根据MDN Documentation，<menuitem>元素是一项实验性技术，必须嵌套为<menu>元素的子元素。该元素应该提供 HTML 对上下文菜单的访问，即右键单击菜单。它仅得到 Firefox 的正式支持。正式地，none 的其他浏览器支持它，这意味着它的呈现将是未定义的。它可能作为 XML 数据处理，也可能作为浏览器定义的其他 HTML 元素处理不当，但这纯粹是推测。

我觉得奇怪的是，Apple 正在使用一个试验性的 HTML 元素，Apple 自己的浏览器 Safari 并未正式支持该元素。也许他们打算在未来版本的 Safari 中支持该元素，并且他们的一位网络开发人员在生产环境中使用了它。即使支持该元素，它仍可能无法正常运行。当前文档指出，Apple 代码中没有使用必需的属性（label 或 command 之一）。所以就算官方支持了代码也还是很烂

简短的回答是：Apple 搞砸了，他们需要修复 HTML。

同时，用户唯一 "possible solution" 是使用不同的浏览器。不过，在开发人员方面，有一个更好的解决方案。如果您想了解上下文菜单应该在 Chrome 中实现的方式，Google 已为此目的提供了一个 API。

Answer 2

这是 Chromium issue #87553 "Implement HTMJ5 menu tag" 的一部分。 menuitem解析为implemented a year ago on Aug 2014.

总的来说，似乎已经完成了大部分，但该功能仍然是"in development"并且是not yet "shipped"，因此在稳定中默认[=31=]禁用频道。

未启用时，当前稳定版 Chrome (v.45) 不知道 menuitem 并将其解析为需要结束标记的普通元素，而不是 content-less 元素根据 spec 没有结束标记。但是如果启用 "Experimental Web Platform Features" Chrome 标志，your code 将被正确解析。

现在，您可以确保标签已正确关闭。（自动关闭，如 spec suggested，不适用于 Chrome。）只要菜单项为空，符合标准的浏览器就会忽略它并且没有任何危害。

P.S。从技术上讲，抛出错误并停止也符合标准，但没有浏览器真正做到这一点。这些是（通常和当前）唯一的合规选项 - 死亡或忽略。

P.S.2 如果不清楚，截至 2015 年 10 月，menuitem 元素不能也不应该有内容，这部分与 2015 年 1 月规范相同。

为什么 Chrome 没有正确解释我的 HTML 而 Canary/Safari 是？

Why Chrome is not interpreting my HTML properly and Canary/Safari is?

html

browser

google-chrome

html-rendering