css - 供应商前缀导致 css 失败

Question

我正在尝试将占位符设置为输入的样式。此规则在 FF 和 Chrome 中运行良好:

.b-required-missing input[type="text"]::placeholder,
.b-required-missing input[type="email"]::placeholder,
.b-required-missing textarea::placeholder {
     color: tomato;
 }

但是，如果我尝试使用 MS 或 webkit 的供应商前缀让它在 Edge 中工作(我在某处读到 Edge 响应 webkit 前缀):

.b-required-missing input[type="text"]::-ms-input-placeholder,
.b-required-missing input[type="email"]::-ms-input-placeholder,
.b-required-missing textarea::-ms-input-placeholder,
.b-required-missing input[type="text"]::placeholder,
.b-required-missing input[type="email"]::placeholder,
.b-required-missing textarea::placeholder{
    color: tomato;
}

这会在 firefox 中破坏它，即使我放置了 -moz- 供应商前缀。我怎样才能让它在所有 3 种浏览器中工作？

http://jsfiddle.net/vc8V4/516/

Answer 1

如果规则无效，浏览器将忽略样式。

所以 -moz- 在 Chrome 中是无效的。

不要使用单个规则，而是对每个前缀使用不同的规则:

.b-required-missing input[type="text"]::-ms-input-placeholder,
.b-required-missing input[type="email"]::-ms-input-placeholder,
.b-required-missing textarea::-ms-input-placeholder {
    color: tomato;
}

.b-required-missing input[type="text"]::placeholder,
.b-required-missing input[type="email"]::placeholder,
.b-required-missing textarea::placeholder{
    color: tomato;
}

这样第一条规则将失败，然后第二条规则将被应用