CSS Grid布局中标签与输入框基线对齐Firefox兼容性问题

根因 #

该对齐差异由浏览器对原生输入框的基线计算规则不一致导致：Chrome默认取输入框内部文本的基线作为对齐基准，Firefox v94版本则默认将输入框容器的底部作为基线，因此会出现标签位置偏高的问题。

无DOM嵌套的修复方案 #

方案1：显式指定首行基线对齐（推荐）

直接修改Grid容器的align-items属性，明确指定按元素首行文本基线对齐，该规则已被Firefox 70及以上版本支持，无需调整其他样式：

.login-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 10px 2px;
  align-items: first baseline; /* 替换原有baseline属性值 */
}

方案2：统一样式消除干扰

如果需要兼容更早的Firefox版本，可通过统一行高、清除输入框默认内边距的方式实现对齐：

label, input {
  font-size: 3em;
  line-height: 1; /* 统一两者行高 */
}
input {
  padding-block: 0; /* 清除输入框默认上下内边距 */
  align-self: baseline;
}

两种方案都不需要额外嵌套div容器，不会影响原有的布局尺寸计算逻辑。

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