Firefox中Placeholder文本内边距失效问题求助

你遇到的问题核心是不同浏览器对placeholder伪元素的盒模型处理逻辑不同：Chrome支持直接给::placeholder设置内边距，但Firefox的::-moz-placeholder伪元素不支持该属性。

可行解决方法 #

不要给placeholder伪元素设置内边距，直接给输入框本身添加内边距——placeholder作为输入框的占位内容，会自动继承输入框的内边距，这样能在所有浏览器中实现一致效果。

修改后的CSS代码 #

/* 给输入框本身设置内边距，统一控制输入内容和placeholder的缩进 */
.form-control {
  padding-left: 15px;
}

/* 通用placeholder样式，仅保留字体大小 */
.form-control::placeholder {
  font-size: 15px;
}

/* Firefox专属placeholder样式，仅保留字体大小 */
.form-control::-moz-placeholder {
  font-size: 15px;
}

补充说明 #

修改后输入框的实际内容和placeholder都会拥有15px的左内边距，既保证了视觉一致性，又利用了浏览器对输入框padding属性的标准支持，彻底解决兼容问题。

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