同一份代码在FF和Chrome浏览器下页面渲染效果不一致如何解决

• 复现环境：Firefox 102、Chrome 103，运行系统为Mac 11.5.2

通用排查步骤 #

• 先校验全局样式重置：绝大多数基础排版差异，根源都是没有做统一的CSS Reset。不同浏览器对HTML标签的默认margin、padding、行高、表单控件样式的内置规则不一致，优先排查全局重置规则是否覆盖了默认样式差异，比逐行定位元素效率高很多。
• 逐元素对比最终生效样式：分别在两个浏览器打开开发者工具，选中渲染错位的元素，直接看Computed面板里的最终计算值，不要只看自己写的CSS规则。重点核对布局类属性：flex布局相关参数、宽高计算值、内外边距生效值、行高、定位偏移量、边框与轮廓的默认表现。
• 排查特殊元素的兼容性：如果是自定义形状、曲线分隔这类非标准块元素，重点核对border-radius、SVG渲染规则、背景尺寸、对象适配属性的表现，以及伪元素::before/::after在不同浏览器下的默认display、content属性差异。
• 校验字体渲染规则：如果是文字排版错位、换行不一致，先检查是否显式声明了统一字体栈，不同浏览器对系统默认字体的字宽、行高解析差异很大，没指定字体时很容易出现高度、换行位置不统一的问题。

针对当前曲线落地页项目的具体修复点 #

这个项目的渲染差异核心是曲线分隔SVG元素、flex布局默认规则的浏览器解析不一致，按下面修改即可对齐双端效果：

1. 统一分隔SVG的样式：Firefox对SVG的默认display属性解析和Chrome不同，SVG作为行内元素时会默认保留文本基线留白，直接给所有区块分隔用的SVG加上统一样式，解决曲线和内容块之间的异常白缝、高度拉伸问题：

.section-curve svg {
  display: block;
  width: 100%;
  height: auto;
}

2. 补全flex布局兼容规则：Firefox对flex子项的默认收缩规则和Chrome有差异，固定高度的flex容器内，子元素很容易被异常压缩导致错位，给flex子项按需加上flex-shrink: 0声明即可。
3. 重置表单、按钮的默认样式：给所有按钮、输入框显式声明border: none、背景初始值、font-family: inherit，避免Firefox给表单控件加上默认系统边框、内边距和字体，导致控件尺寸和Chrome不一致。
4. 统一图片默认表现：给所有img标签加上max-width: 100%; display: block;，解决Firefox下图片作为行内元素产生的底部留白、宽度溢出容器问题。

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