嘿，这个问题我之前踩过坑！核心原因是你把不同浏览器的前缀选择器写在同一个CSS规则里了——浏览器遇到不认识的选择器时，会直接忽略整个规则块，这就导致Firefox里的样式直接失效了。

正确的解决方案：分开编写各浏览器的规则 #

要让样式在Firefox、Chrome、Edge（包括新旧版本）都生效，需要把不同前缀的占位符选择器拆成单独的CSS规则块，再加上标准语法的写法适配现代浏览器。具体代码示例如下：

/* 适配 Chrome、Chromium 内核的 Edge（现在的主流Edge版本） */
::-webkit-input-placeholder {
  color: #666;
  font-style: italic;
  font-size: 14px;
  /* 你的其他自定义样式 */
}

/* 适配 Firefox */
::-moz-placeholder {
  color: #666;
  font-style: italic;
  font-size: 14px;
  /* 你的其他自定义样式 */
}

/* 适配旧版 Edge（EdgeHTML 内核，现在几乎没人用了，可选添加） */
::-ms-input-placeholder {
  color: #666;
  font-style: italic;
  font-size: 14px;
}

/* 标准语法，适配所有支持现代标准的浏览器 */
::placeholder {
  color: #666;
  font-style: italic;
  font-size: 14px;
}

为什么之前的写法会失效？ #

举个例子，如果你把选择器写在一起：

::-webkit-input-placeholder, ::-moz-placeholder {
  /* 样式 */
}

Firefox 不认识::-webkit-input-placeholder这个选择器，会判定整个选择器组无效，直接跳过这个规则，导致Firefox里的占位符样式完全不生效。分开写之后，每个浏览器只会解析自己能识别的规则块，互不干扰。

现在新版Edge已经全面切换为Chromium内核，::-webkit-input-placeholder就能完美适配它；加上标准的::placeholder写法，还能覆盖未来的浏览器版本，兼容性拉满。

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