html - 为什么 Chrome 不能正确解释我的 HTML 而 Canary/Safari 是？

Question

我使用 Chrome 作为我的默认导航器，有一段时间了，每当我需要阅读一些苹果文档时，我不得不求助于其他浏览器(或外部工具，如 Dash)，因为苹果文档菜单样式只是 在 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 Canary(正常工作)，

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

• 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 文档链接，但到目前为止，我是唯一遇到这个“问题”的人

我也试过了:

• 禁用所有浏览器扩展
• 禁用/清除所有浏览器缓存
• 比较浏览器下载的 HTML 和 CSS 资源，但它们是相同的
• 我创建了 a codepen with just this piece of HTML如果你想要一个简单的 HTML 来更好地分析，同样的问题会在没有所有其他 Apple 文档垃圾的情况下发生
• 我检查了 <menuitem> on mdn似乎 label属性是“Required when a command attribute is not present”，但这足以破坏 Chrome 上的一切吗？ Apple 是否使用 <menuitem>用于规范中预期以外的目的？

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

Answer 1

这是 Chromium 的一部分 issue #87553 “实现 HTMJ5 菜单标签”。 menuitem解析为implemented一年前 Aug 2014 .

总的来说，它似乎大部分已经完成，但该功能仍在“开发中”并且是 not yet "shipped" ，因此它在稳定版中默认禁用 channel 。

当它未启用时，当前稳定的 Chrome (v.45) 不知道 menuitem 并将其解析为需要结束标记的普通元素，而不是 content-less 根据 spec 没有结束标记的元素. 但是，如果您启用“实验性 Web 平台功能”Chrome 标志，your code将被正确解析。

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

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

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