Chrome与Firefox容器宽度渲染不一致问题及解决方法咨询

差异核心原因 #

两款浏览器的字体渲染引擎逻辑差异是问题根源：

• Chrome基于Blink+Skia引擎渲染字体，Firefox则采用Gecko+FreeType（平台不同可能有变化），二者在字符宽度计算、字符间距分配、抗锯齿处理的算法上存在细微区别。
• 你使用的Arvo是第三方自定义字体，不同引擎对这类非系统字体的解析、布局计算逻辑不一致；再加上width: max-content完全依赖内容实际宽度渲染，字体渲染的细微偏差被放大，最终导致容器宽度出现明显差值。
• 即使设置了subpixel-antialiased，两款浏览器对该属性的实现细节也存在分歧，进一步影响了宽度计算结果。

统一渲染宽度的可行方案 #

1. 固定宽度替代自适应（最直接） #

如果布局允许，直接给容器设置固定宽度，规避内容自适应带来的差异：

div {
  /* 替换width: max-content */
  width: 680px; /* 根据实际需求调整为合适的固定值 */
}

2. 统一字体渲染逻辑 #

添加text-rendering: optimizeLegibility属性，让浏览器优先保证字体布局的一致性，同时替换subpixel-antialiased为兼容性更好的抗锯齿设置：

div {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

3. 消除字体布局变量 #

关闭字体连字、设置极小的固定字符间距，减少字体自身的布局不确定性：

div {
  font-variant-ligatures: none;
  letter-spacing: 0.01em; /* 微调字符间距，统一计算逻辑 */
}

4. JavaScript动态修正（兜底方案） #

如果必须保留max-content自适应，可以通过JS获取宽度后强制统一：

const elm = document.getElementById('div-main-con');
const computedWidth = elm.getBoundingClientRect().width;
// 取整数或两款浏览器宽度的中间值强制设置
elm.style.width = `${Math.round(computedWidth)}px`;

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