Edge与Chrome字体CSS渲染差异：无需JS的差异化CSS实现方法

可以通过CSS特性查询（@supports）结合浏览器专属属性实现，无需JavaScript。

具体实现 #

先定义通用基础样式，再通过特性查询分别覆盖Edge或Chrome的样式：

/* 基础样式（默认使用Edge显示正常的尺寸） */
.block-footer-text{
  letter-spacing: -0.5px;
  font-size: 10px;
}

/* 针对Chrome单独调整字体大小 */
@supports not (-ms-ime-align: auto) {
  .block-footer-text {
    font-size: 11px; /* 根据实际显示效果调整数值 */
  }
}

原理说明 #

• -ms-ime-align: auto是Edge浏览器独有的CSS属性，Chrome不支持该特性
• @supports (-ms-ime-align: auto) 会精准匹配Edge浏览器，可在其中编写Edge专属样式
• @supports not (-ms-ime-align: auto) 匹配不支持该属性的浏览器（此处即Chrome），用于编写Chrome专属样式

若需适配旧版Edge（EdgeHTML内核，非Chromium），可使用@supports (-ms-accelerator:true)识别，但目前主流Edge均为Chromium内核，上述方案已能覆盖绝大多数场景。

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