CSS Grid嵌套图片Firefox渲染异常 如何实现跨浏览器一致效果

Firefox与Chrome渲染不一致的核心是网格尺寸计算的默认逻辑差异，叠加不规范的属性写法放大了兼容性问题：

• 未显式定义.container宽度与grid-template-columns列规则，浏览器会自动根据内容推导网格尺寸：Chrome优先识别img {height:100%}的约束，先按容器高度缩放图片再计算容器宽度；Firefox优先读取img的原始固有尺寸，先按原图大小占位计算列宽，再应用高度缩放，直接把容器宽度撑大
• 现有grid-template-rows: 50% 50%写法存在计算矛盾：两行高度总和为容器高度的100%，没有预留5px gap的分配空间，属于规范未定义强制渲染规则的百分比轨道溢出场景，不同浏览器走了不同的容错逻辑，进一步导致效果差异

完全保留Grid布局结构，不影响后续响应式调整grid-template-areas的需求，只需要补全尺寸约束、修正不规范写法即可实现全浏览器表现一致：

• 用1fr单位替换百分比定义行高，fr单位会自动扣除gap占用的空间后再分配剩余高度，从根源消除百分比计算的矛盾
• 显式声明grid-template-columns规则，明确列宽计算逻辑，避免浏览器按固有图片尺寸猜列宽
• 给img标签补全宽度约束与object-fit规则，消除图片原始尺寸对网格计算的干扰，同时避免图片缩放变形
• 统一网格内元素的对齐规则，抹平不同浏览器的默认对齐差异

修复后完整代码 #

HTML结构无需调整，替换为如下CSS即可：

.parent {
  position: relative;
  width: 800px;
  height: 300px;
  background-color: green;
  margin: auto;
}

.container {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: grid;
  grid-template-areas:
    "area1 area2"
    "area1 area3";
  /* 用fr单位自动扣除gap后分配行高，消除计算矛盾 */
  grid-template-rows: 1fr 1fr;
  /* 显式定义两列，列宽随内容自适应 */
  grid-template-columns: auto auto;
  height: 20%;
  gap: 5px;
  /* 统一网格元素拉伸对齐 */
  align-items: stretch;
}

.image1 {
  grid-area: area1;
}

.image2 {
  grid-area: area2;
}
.image3 {
  grid-area: area3;
}

img {
  height: 100%;
  /* 补全宽度约束，消除图片固有尺寸对网格计算的干扰 */
  width: 100%;
  /* 保证图片缩放不变形 */
  object-fit: cover;
  display: block;
}

修复后的代码在Chrome、Firefox、Safari下渲染效果完全对齐原有预期，移动端适配时仅需重写网格模板相关属性即可，不需要调整整体布局逻辑。

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