Angular CDK Menu子菜单未对齐问题咨询

这种子菜单逐级向下偏移1像素的情况并非Angular CDK Menu的默认有意设计，通常是由以下几种原因导致的：

• 自定义样式冲突：检查是否给菜单或菜单项添加了额外的margin、padding或border规则，尤其是非整数像素值，叠加后可能引发布局偏移。可以通过浏览器开发者工具（F12）对比CDK默认样式与自定义样式的差异，定位冲突的CSS代码。
• 全局样式干扰：项目中的全局样式重置（如非常规的盒模型设置、元素默认间距重置）可能影响CDK菜单的布局计算逻辑，导致偏移。
• 亚像素渲染问题：部分浏览器在处理小数像素或CSS变换时，会出现亚像素级的渲染偏移。可以尝试给子菜单容器添加transform: translateZ(0)触发硬件加速，或者手动调整CDK菜单的top定位值修正偏移。
• 版本bug：如果使用的@angular/cdk版本较旧，可能存在已修复的布局缺陷，建议升级到最新稳定版本，并查阅官方更新日志确认相关修复记录。

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