图片CSS屏幕适配在Firefox与Chromium中的差异问题排查与修复

问题成因 #

该问题源于Chromium与Firefox在布局精度计算、内联元素对齐规则上的核心差异：

1. 小数像素处理逻辑不同：当窗口高度计算结果包含小数像素时，Firefox会自动截断小数部分，而Chromium会向上取整，导致.center容器实际高度比预期多出1px，触发不必要的垂直滚动条。
2. 内联元素对齐的细微偏差：图片设置了vertical-align: text-bottom，作为内联元素，它会基于容器文本基线对齐。Chromium的基线计算逻辑会让图片产生1px垂直偏移，进一步加剧容器高度溢出问题。
3. Grid布局高度计算精度差异：.body通过height:100%继承父级Grid的1fr高度，Chromium对该高度的精度处理方式，使得容器高度与内部图片max-height:100%的计算出现偏差，最终引发溢出。

替代修复方案（除calc(100% - 1px)外） #

1. 将图片改为块级元素 #

消除内联元素对齐规则的影响，让max-height:100%精准匹配容器高度：

.center img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  padding: 0.2em;
}

2. 消除容器行高影响 #

给.center容器设置line-height: 0，避免内联元素默认行高带来的额外高度：

.center {
  text-align: center;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  line-height: 0;
}

3. 调整图片垂直对齐方式 #

将vertical-align: text-bottom改为middle或top，修正内联元素对齐偏差：

.center img {
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
  padding: 0.2em;
}

4. 替换.body的溢出属性 #

若不需要.body的滚动功能，可将overflow: auto改为overflow: clip，直接截断溢出的1px内容：

.body {
  height: 100%;
  overflow: clip;
  display: grid;
  grid-template-columns: auto 1fr auto;
}

5. 用Flex布局重构.body #

利用Flex布局的高度计算逻辑规避Chromium的Grid精度问题：

.body {
  height: 100%;
  overflow: auto;
  display: flex;
  align-items: center;
  gap: 0.2em;
}

.left, .right {
  margin: 0 0.1em;
}

.center {
  flex: 1;
  text-align: center;
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

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