Firefox中表单占位符字体异常、提交按钮出现额外文本问题排查

问题说明 #

开发的表单在Firefox中存在两个异常：

• 输入框placeholder字体与Chrome显示不一致
• submit按钮出现重复文本

Chrome预期显示效果：

Firefox异常显示效果：

问题1：placeholder字体跨浏览器不一致 #

原因 #

Firefox对::placeholder伪元素的样式解析逻辑和Chrome存在差异，当前CSS仅针对标准伪元素设置字体，未兼容Firefox的私有前缀::-moz-placeholder；同时textarea的placeholder未明确指定字体，导致显示效果不一致。

修复代码 #

更新CSS中的placeholder样式，添加Firefox兼容前缀，统一input和textarea的placeholder字体：

/* 兼容Chrome和Firefox的placeholder样式 */
input::placeholder,
textarea::placeholder,
input::-moz-placeholder,
textarea::-moz-placeholder {
  font-family: 'Poppins', sans-serif;
  color: white;
  font-weight: 600;
}

问题2：submit按钮出现额外文本 #

原因 #

<input type="submit">标签不支持placeholder属性，Chrome会直接忽略该属性，但Firefox会将placeholder内容叠加在浏览器默认的"提交"文本上，造成重复显示。

修复代码 #

1. 修改HTML，将submit按钮的placeholder属性替换为value属性：

<!-- 原代码 -->
<input class="submit" type="submit" placeholder="submit" />

<!-- 修改后 -->
<input class="submit" type="submit" value="submit" />

2. 补充CSS，重置Firefox默认按钮样式：

.submit {
  width: 10%;
  padding: 5px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  color: white;
  background-color: transparent;
  font-weight: 600;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none; /* 重置Firefox默认按钮样式 */
}

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