相同代码及同版本浏览器下Ubuntu与Windows的CSS渲染差异问题

这类同代码、同浏览器版本跨操作系统出现的文本位置偏移，绝大多数是系统层面的字体配置差异导致的，和浏览器本身渲染逻辑无关，可按以下方向排查：

• 先核对红色文本区域配置的字体族：你指定的字体大概率没有在两个系统中同时安装，触发了浏览器的字体 fallback 机制。Windows和Ubuntu默认自带的系统字体完全不同，不同字体的字宽、字符默认边距、行高都有细微差异，累积后就会出现肉眼可见的位置偏移。
• 检查文本容器是否做了明确的样式重置：如果父div和文本元素没有写死固定的padding、margin、text-align属性，浏览器会调用各系统自带的默认用户代理样式表（UA样式）兜底，不同系统的UA样式默认值存在细微区别，也会导致位置偏差。
• 排查系统级字体渲染设置：Windows的ClearType、Ubuntu的字体抗锯齿/平滑设置属于系统级渲染开关，会改变字形的实际显示宽度，同样可能造成位置偏移。

快速验证方法 #

1. 给红色文本所在元素强制指定跨系统通用字体（比如sans-serif），同时显式声明padding: 0; margin: 0; text-align: left，刷新两个系统的页面对比，如果偏移消失即可确认是字体或默认样式问题。
2. 打开Firefox开发者工具，分别在两个系统中选中红色文本元素，在「计算后样式（Computed）」面板对比实际生效的font-family、padding、margin、text-indent属性值，找到存在差异的属性就能直接定位根因。

问题背景 #

同一段HTML代码在相同版本浏览器中显示效果存在差异，初步猜测与操作系统有关但暂未定位根因。测试所用代码均来自GitLab同一仓库的同一版本，主测试浏览器为Firefox，其他浏览器对照测试均复现了相同问题：

• Ubuntu环境渲染效果：
  
• Windows环境渲染效果：
  
  差异点为红色文本区域：Ubuntu环境下该文本相对所在父div位置更偏左。所有测试场景下浏览器缩放均为100%，所用Firefox版本完全一致，均为Firefox 102.0。

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