Firefox -moz-placeholder，不工作

Question

我无法让这个占位符在 Firefox 13.0.1 中正确设置样式

我有一个带占位符的输入字段：

<input class="textFieldLarge" placeholder="Username" id="username" name="username" type="text" />

我有这个 CSS：

.textFieldLarge{
    width:400px;
    height:50px;
    line-height:50px;
    padding-left:5px;
    padding-right:5px;

    background:none;
    background-color:#FFF;
    border:solid 1px #BBB;

    font-family:Arial, Helvetica, sans-serif;
    font-size:20px;
    color:#333;
}

.textFieldLarge::-webkit-input-placeholder, .textFieldLarge:-moz-placeholder{
    font-style:italic;
    color:#BBB;
}

这应该设置文本字段#333 和占位符#BBB 斜体的样式。我可以使用 chrome 和 IE，但无法弄清楚 FF。

编辑，发现我同时应用 ::-webkit-input-placeholder 的问题

仍然希望修复，但我怀疑是否可能，因为当两者单独应用时它可以正常工作。不再是真正的问题，但有点烦人。

Answer 1

自发布此问题以来已经有一段时间了，但除了 Gerve 的回答之外，对于 Firefox 19+，应该使用 ::-moz-placeholder：http://mzl.la/15FPlx6，并且可以使用 :-ms-input-placeholder 添加对 IE10 的支持。所以最终的代码会是这样的：

.textFieldLarge::-webkit-input-placeholder {
  font-style:italic;
  color:#BBB;
} 

.textFieldLarge:-moz-placeholder {
  font-style:italic;
  color:#BBB;
}

.textFieldLarge::-moz-placeholder { /* Firefox 19+ */
  font-style:italic;
  color:#BBB;
}

.textFieldLarge:-ms-input-placeholder { /* IE10 */
  font-style:italic;
  color:#BBB;
}

Answer 2

如果选择器的一部分无效，则整个选择器都将无效。

因此，-moz- 和 -webkit- 需要有两个不同的规则。