React中切换Input的text/password类型时Placeholder在Chrome偏移问题求助

偏移原因 #

Chrome和Safari对password类型输入框的默认渲染逻辑存在差异：

• Chrome会为密码输入框默认使用等宽的密码专用字体（即使指定了Tahoma，部分系统/版本下仍会优先渲染默认密码字体），这类字体的基线位置、行高计算和普通文本输入框的字体不一致，直接导致placeholder垂直对齐偏移。
• 你给password类型单独添加的padding-bottom:1px，虽然临时修正了Chrome的偏移，但Safari中普通文本和密码输入框的字体渲染基线原本一致，额外内边距反而破坏了对齐。
• 同时，password与text类型不同的letter-spacing值，会让浏览器计算文本布局时产生细微差异，进一步放大了偏移问题。

修复方案 #

方案1：统一布局对齐逻辑（推荐） #

通过flex布局强制文本垂直居中，彻底消除浏览器默认渲染的差异：

.input {
  width: 100%;
  height: 40px;
  /* 用flex确保垂直居中，不受字体渲染差异影响 */
  display: flex;
  align-items: center;
  font-family: Tahoma, sans-serif, -apple-system, system-ui;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  background-color: inherit;
  border: none;
  text-align: left;
  letter-spacing: 0.5px;
  /* 统一内边距，避免单独设置password的padding */
  padding: 0;

  &::placeholder {
    font-family: Tahoma, sans-serif, -apple-system, system-ui;
    font-size: 14px;
    letter-spacing: 0.5px;
    line-height: 20px;
    /* 强制placeholder继承垂直对齐规则 */
    vertical-align: middle;
  }

  &[type='password'] {
    letter-spacing: 2.5px;
    /* 移除导致Safari异常的padding-bottom */
    /* padding-bottom: 1px; */
    /* 强制使用指定字体，避免Chrome默认密码字体干扰 */
    font-family: Tahoma, sans-serif !important;
  }

  &:focus {
    outline: none;
  }
}

方案2：针对Chrome做浏览器兼容 #

如果不想改动原有布局逻辑，可通过CSS媒体查询仅针对Chrome添加修正样式，避免影响Safari：

/* 仅对Chrome浏览器的password输入框应用padding修正 */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
  .input[type='password'] {
    padding-bottom: 1px;
  }
}

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