Firefox缩放模式下页脚文本溢出的CSS修复方案

这个Firefox缩放溢出问题是典型的固定尺寸容器适配疏漏：
Firefox的全局缩放和仅文本缩放渲染逻辑完全不同：仅文本缩放只会放大字体尺寸，不改变原有盒模型的固定宽高；130%全局缩放会等比缩放所有盒模型、边距、字体、行高，如果你给页脚内.caautos1写死了固定像素高度、未配置文本换行规则，缩放后放大的文本行高总和超过容器固定高度，就会出现溢出。

核心CSS修正 #

首先找到你原有代码里.caautos1的样式规则，删掉写死的height: xxxpx配置，替换为以下代码：

.caautos1 {
  /* 移除固定height，改用最小高度做基线约束 */
  min-height: 120px;
  width: 100%;
  /* 内边距、边框算入容器总宽度，不会额外撑破布局 */
  box-sizing: border-box;
  padding: 1rem;
  /* 长文本自动换行，避免大字体下横向溢出 */
  overflow-wrap: break-word;
  word-break: break-word;
  /* 用相对行高，不要写死px值，缩放时自动适配字体尺寸 */
  line-height: 1.5;
}

再检查页脚父容器的样式，同样移除写死的固定高度，补上弹性布局换行兜底：

footer {
  /* 移除原有固定height配置 */
  min-height: 200px;
  width: 100%;
  display: flex;
  /* 子元素在缩放后总宽度超出父容器时自动换行，不会溢出 */
  flex-wrap: wrap;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 2rem 1rem;
}

全局适配优化 #

• 排查页面所有承载文本的容器，凡是写死固定像素height的，全部替换为min-height，让容器可以随内部文本高度自动撑开
• 所有容器统一加上box-sizing: border-box，避免内边距、边框导致的宽度溢出
• 文本相关的行高、间距优先用rem、相对倍数做单位，减少固定px单位的使用，适配不同缩放比例

修复完成后在Firefox里做以下校验：

1. 设置全局缩放为130%，检查.caautos1区域文本无溢出、无遮挡
2. 切换到「仅文本缩放」模式，调整文本缩放比例，确认布局无错乱
3. 分别测试100%、150%全局缩放，确认页脚区域布局始终正常
4. 打开Chrome、Edge做同场景验证，保证跨浏览器表现一致

固定像素高度写布局在100%默认缩放下看起来没有问题，但只要遇到全局缩放、用户系统自定义大字体、移动端字体放大的场景，100%会出现文本溢出。所有承载动态文本的区域，都不要用固定高度锁死容器尺寸，用最小高度做基线、容器高度随内容自适应的写法，才能覆盖所有显示场景。

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