Mac端Chrome网页显示异常 相同站点在Windows系统下可正常展示

问题背景 #

Web开发中同版本Chrome浏览器在Windows和Mac系统下出现样式错位，核心代码如下：

<div class="cool">
  <i class="far fa-clock"></i>
  <h3>Up to date</h3>
  <p>I am always trying to be as up to date with the scripts as possible</p>
</div>

核心原因 #

1. 字体与渲染引擎差异：Mac系统采用Core Text渲染字体，Windows采用DirectWrite，两者对相同字号、行高的实际渲染高度、字符间距计算结果存在差异，如果代码中没有显式设置文本相关属性，依赖系统默认值就会出现布局偏移。
2. 浏览器默认样式差异：同版本Chrome在不同系统下的用户代理默认样式（user agent stylesheet）存在细微差别，比如<h3>、<p>标签的默认上下边距、<i>标签的默认对齐方式都可能不一致，未手动重置的情况下就会出现错位。
3. 图标字体渲染差异：代码中使用的Font Awesome图标属于字体资源，不同系统下字体图标的渲染基线、默认大小存在差异，未显式对齐的情况下会和后续文本出现排版错位。
4. 布局相关规则差异：Mac端Chrome滚动条默认是悬浮不占位的样式，Windows端滚动条默认占用容器宽度，如果布局计算没有考虑滚动条宽度差异也会导致宽度计算错误出现错位。

可行解决方案 #

• 全局统一基础样式：引入Normalize.css或者自定义CSS Reset抹平不同环境的默认样式差异，全局显式设置* {box-sizing: border-box;}统一盒模型计算规则。
• 显式定义文本属性：不要依赖系统默认字体，指定完整的字体 fallback 规则，同时给所有文本标签显式设置line-height、margin、padding属性，不要使用浏览器默认值，针对上述代码可给.cool h3、.cool p设置固定的上下边距。
• 统一图标对齐规则：给Font Awesome图标标签显式设置vertical-align: middle，或者给外层.cool容器设置flex布局，用align-items: center统一图标和文本的对齐逻辑，避免基线差异导致错位。
• 适配滚动条差异：如果涉及宽度计算，不要依赖滚动条占位宽度，可通过CSS设置scrollbar-width: thin（非IE浏览器）统一不同端滚动条表现，或者用JS动态计算滚动条宽度做适配。
• 固定容器尺寸：固定布局的模块可给外层容器设置固定的宽高、内边距，避免内容高度受字体渲染差异影响出现撑开偏移。

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