Chrome 66.0.3359.139菜单故障：仅首列子菜单可点击，火狐、Safari正常

根据你描述的情况——仅首列子菜单可点击、其他列失效，且仅在Chrome 66这个特定版本出现，还用到了pointer event相关代码，这几乎可以锁定是Chrome 66对pointer-events属性或堆叠上下文的处理逻辑变更导致的兼容性问题。下面是具体的排查步骤和修复方案：

一、优先排查遮罩层的pointer-events设置 #

你的菜单带有overlay遮罩层，这是最可能的“罪魁祸首”：

• 正常来说，遮罩层应该只做视觉遮挡，不拦截点击事件，所以需要设置pointer-events: none，这样点击会穿透到下面的子菜单。如果遮罩层的pointer-events被错误设置为auto，就会挡住所有子菜单，但首列可能因为z-index更高或者DOM顺序靠前，刚好能“突围”。
• 打开Chrome开发者工具（F12），选中遮罩层元素，查看Computed面板里的pointer-events值，确认是否为none。如果不是，手动修改成none测试是否恢复正常。

二、检查子菜单的堆叠层级（z-index） #

Chrome 66可能对堆叠上下文的处理做了细微调整，导致非首列子菜单的z-index失效：

• 确保所有子菜单的z-index值都高于遮罩层，且子菜单的父元素没有创建新的堆叠上下文（比如设置了transform、perspective、filter等属性）——这些属性会让子菜单的z-index只在父元素内部生效，无法穿透到遮罩层之上。
• 用DevTools的Layers面板查看层级关系，对比首列和非首列子菜单的图层位置，看非首列是否被遮罩层覆盖。

三、验证pointer-events的继承问题 #

检查非首列子菜单及其父元素的pointer-events设置：

• 有没有给父容器错误设置了pointer-events: none？子菜单会继承这个属性，导致无法点击。可以在DevTools中选中无法点击的子菜单项，查看Styles面板里的pointer-events，如果是继承来的none，手动覆盖为auto测试。

四、针对Chrome 66的专属修复 #

如果以上排查都没问题，可能是Chrome 66的特定bug，你可以添加针对性的CSS hack：

/* 仅针对Chrome 66及基于Chromium的同版本浏览器 */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
    /* 强制遮罩层不拦截点击 */
    .menu-overlay {
        pointer-events: none !important;
    }
    /* 确保子菜单能接收点击 */
    .sub-menu-item {
        pointer-events: auto !important;
        position: relative;
        z-index: 9999; /* 确保高于遮罩层 */
    }
}

五、排除JS事件绑定问题 #

虽然你说之前版本正常，但还是可以快速验证：

• 在DevTools的Console面板中，给无法点击的子菜单手动绑定一个点击事件：

  document.querySelector('.problem-submenu-item').addEventListener('click', () => console.log('clicked'));
  

  点击后看控制台是否输出，如果有，说明是原有JS事件绑定的问题；如果没有，还是CSS层级或pointer-events的问题。

按照这个流程排查，应该能快速定位并解决问题——毕竟其他浏览器正常，且之前Chrome版本没问题，核心就是Chrome 66的CSS处理逻辑变化导致的。

内容的提问来源于stack exchange，提问作者sohaib