css - 如何解决跨浏览器的占位符 CSS 差异？

Question

我正在使用 Twitter Bootstrap CSS。您可以在下面看到相同代码在 FireFox 和 Chrome 中的显示方式有何不同。

这很奇怪。 Firebug 告诉我占位符的 css 是这样设置为浅灰色的:

:-moz-placeholder {
    color: #999999;
}

这应该会影响所有元素中的所有占位符，因为它在 Chrome 中正确完成了。但是在 Firefox 中，为什么 textareas 被正确应用，而 input 却没有？我该如何解决这个问题？

<input id="id_referred_by" type="text" maxlength="50" name="referred_by" placeholder="...was referred by?">

<textarea id="id_contacts_interests" name="contacts_interests" cols="40" placeholder="Any particular interests?" rows="4"></textarea>

Chrome:

火狐:

更新:

下面的评论给了我一个想法:

Input 与 textarea 不同，color: #9999 条目被划掉了，这意味着有东西覆盖了它。

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    color: #555555;
    display: inline-block;
    font-size: 13px;
    height: 18px;
    line-height: 18px;
    margin-bottom: 9px;
    padding: 4px;
}

实际上是这个 color: #555555;。当我在 Firebug 中禁用它时，一切正常。为什么 Chrome 不关心这个而 Firefox 关心呢？任何提示如何在两种浏览器中解决这个问题？我还是 css 的新手。

Answer 1

因为这个奇怪的伪元素，我前段时间做了一些小摆弄，结果是？您不能在选择器之间添加逗号，您必须指定两次规则，这很遗憾。

HTML:

<input type="text" id="test-webkit" placeholder="test-webkit" /><br />
<input type="text" id="test-moz" placeholder="test-moz" /><br />
<input type="text" id="test-both" placeholder="test-both" /><br />
<input type="text" class="test-both" placeholder="test-both-separately" />​

CSS:

/* Works on Webkit */
#test-webkit::-webkit-input-placeholder {
    color: red;
}

/* Works on Firefox */    
#test-moz:-moz-placeholder {
    color: red;
}

/* Don't work */
#test-both::-webkit-input-placeholder, #test-both:input:-moz-placeholder {
    color: red;
}

/* Works on both */
.test-both::-webkit-input-placeholder {
    color: red;
}
.test-both:-moz-placeholder {
    color: red;
}​

The Fiddle .