谷歌Chrome浏览器中MuiBadge徽章内容不居中如何解决？

• 核心是Chrome和Firefox的默认字体渲染、行高计算、基线对齐规则存在原生差异，MUI Badge默认的绝对定位逻辑依赖父容器的基线和行高，两种浏览器的计算偏差会直接导致徽章位置偏移
• 你使用的ReactSVG渲染的自定义图标没有设置显式布局属性，默认inline状态的SVG元素在不同浏览器里的占位高度计算结果不一致，进一步放大了Badge的定位偏差

你可以任选以下一种方案适配，推荐优先使用第一种，兼容性最高：

• 方案1：直接覆盖MUI Badge的内置徽章样式，消除浏览器默认差异

<Badge
  badgeContent={quantity}
  color='primary'
  sx={{
    '& .MuiBadge-badge': {
      // 强制基于徽章自身中心对齐，消除基线影响
      transform: 'translate(50%, -50%)',
      lineHeight: 1,
      // 可根据实际显示效果微调top偏移值
      top: '4px'
    }
  }}
>
  <ReactSVG
    svgClassName='menu-icon'
    src='/images/cart.svg'
    alt='My cart'
  />
</Badge>

• 方案2：给自定义SVG图标增加固定布局属性，统一浏览器渲染尺寸
  给你的menu-icon类添加以下CSS规则：

.menu-icon {
  display: inline-block;
  vertical-align: middle;
  width: 24px; /* 和你的设计稿图标尺寸保持一致 */
  height: 24px;
}

• 方案3：通过Badge原生属性调整锚点偏移
  如果使用的是MUI v5及以上版本，也可以直接通过anchorOrigin配合偏移量调整：

<Badge
  badgeContent={quantity}
  color='primary'
  anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
  sx={{ '& .MuiBadge-badge': { translateY: '-2px' } }}
>
  {/* 图标内容 */}
</Badge>

调整完成后可以分别在两个浏览器中打开开发者工具，选中.MuiBadge-badge元素查看计算属性，微调偏移值到两端显示一致即可。

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