Question

我使用Chrome作为我的默认导航器，我需要阅读其他浏览器（或Dash等外部工具）时，我需要阅读一些Apple文档，因为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>和{ {1}}标记所有内容，使许多CSS选择器规则停止应用。

以下是Chrome（buggy）上的显示方式

和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 docs链接，但到目前为止，我是唯一一个有这个＆＃34;问题＆＃34;

我也尝试过：

停用所有浏览器扩展程序
已禁用/清除所有浏览器缓存
比较浏览器下载的HTML和CSS资源，但它们是相同的
我创建了a codepen with just this piece of HTML，如果您想要一个简单的HTML以便更好地进行分析，那么在没有其他Apple文档垃圾的情况下会出现同样的问题
我检查了<menuitem> on mdn，似乎<menu>属性是＆＃34; label＆＃34;，但这足以打破Chrome上的所有内容？ Apple是否将Required when a command attribute is not present用于规范中的其他目的？

那么，有没有人知道可能是什么原因以及这个令人讨厌的问题的可能解决方案是什么？

Answer 1

根据MDN Documentation，<menuitem>元素是一种实验性技术，必须嵌套为<menu>元素的子元素。该元素应该提供对上下文菜单的HTML访问，即右键菜单。它仅由Firefox正式支持。正式地说，没有其他浏览器支持它，这意味着它的渲染将是未定义的。它可以作为XML数据处理，也可能被错误处理为浏览器定义的其他HTML元素，但这纯粹是推测性的。

我发现Apple很好奇Apple正在使用Safari，Apple自己的浏览器没有正式支持的实验性HTML元素。也许他们打算在未来版本的Safari中支持该元素，并且他们的一个网络开发人员在生产环境中使用它。即使支持该元素，它仍可能无法正常工作。当前文档指出，在Apple的代码中没有使用必需的属性（label或command之一）。因此，即使官方支持，代码仍然会很糟糕。

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

同时唯一可能的解决方案＆＃34;对于用户来说是使用不同的浏览器。但是，在开发人员方面，有一个更好的解决方案。如果您想了解在Chrome中实施上下文菜单的方式，Google已为此目的提供API。

Answer 2

这是Chromium issue #87553＆＃34;实施HTMJ5菜单标签＆＃34;的一部分。一年前implemented上的menuitem解析是Aug 2014。

总的来说，它似乎大部分都已完成，但该功能仍然处于开发阶段＆＃34;并且为not yet "shipped"，因此默认情况下在稳定的频道中已停用。

如果未启用，则当前稳定的Chrome（第45版）不知道menuitem并将其解析为需要结束标记的普通元素，而不是无内容根据{{3}}的没有结束标记的元素。但是，如果您启用＆＃34;实验性Web平台功能＆＃34; Chrome标记spec将被正确解析。

目前，您可以确保正确关闭代码。（自我关闭，因为your code，不适用于Chrome。）只要menuitem为空，标准合规浏览器就会忽略它，并且不会造成任何伤害。

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

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

为什么Chrome无法正确解释我的HTML和Canary / Safari？

2 个答案: