Chrome 95版本菜单切换图标边距与Firefox、Edge不一致问题咨询

问题原因 #

该问题是不同浏览器对行内伪元素的默认对齐、基线计算逻辑存在差异导致的，Chrome 95.0.4638.54版本对伪元素的行高计算规则和Firefox、Edge不同，并非Chrome给元素额外添加了padding或margin，也无需做全局样式重置。

全浏览器兼容解决方案 #

给伪元素统一添加行内块属性、垂直对齐规则和固定行高，即可解决换行、错位问题，无需额外前缀：

.menu-toggle:before {
    content: '☰';
    font-size: 16px;
    color: black;
    font-weight: bold;
    /* 新增通用对齐规则 */
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    margin-right: 4px; /* 可按需调整图标和文字的间距 */
}

.menu-toggle.toggled-on:before {
    content: '\d7';
    font-size: 22px;
    color: red;
    font-weight: bold;
    margin-top: 0;
    /* 新增通用对齐规则，和上方保持逻辑一致 */
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

Chrome专属样式调整方案 #

如果需要仅针对Chrome做单独的margin偏移，可以使用Chrome专属的媒体查询规则包裹样式，只有Chrome内核浏览器会匹配该规则：

/* 仅Chrome浏览器生效的规则 */
@media (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
  .menu-toggle.toggled-on:before {
    margin-top: -2px; /* 可按需调整偏移数值 */
  }
}

修改后清除Chrome缓存刷新页面即可验证效果，通用解决方案已经可以覆盖绝大多数同场景对齐问题。

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