输入框获得焦点后后续元素样式异常的原因及样式统一需求

问题原因 #

这是Chrome和Edge的浏览器默认渲染行为——当输入框获得焦点时，浏览器字体渲染引擎会做隐性的优化调整，导致后续div元素的字体在视觉上出现粗细变化，但实际上没有任何CSS属性或类名的修改。Firefox不存在这个渲染差异。

解决方案 #

给需要统一样式的元素明确指定font-weight属性，强制固定字体权重，就能抵消浏览器的隐性渲染变化。修改后的CSS代码如下：

form {
  display: flex;
  flex-direction: column;
  background-color: black;
  color: red;
  /* 可选：给容器统一设置，让所有子元素继承一致的字体权重 */
  font-weight: normal;
}

span {
  margin-bottom: 20px;
}

div {
  /* 明确指定字体权重，避免视觉上的渲染差异 */
  font-weight: normal;
}

如果不想单独给div设置，直接给form加上font-weight: normal，让所有子元素继承这个值，也能从根源上解决问题。

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