css - 一个供应商前缀位于不同供应商前缀中

Question

我最近遇到了一个具有如下 CSS 规则的元素:

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    #header .searchform input:-moz-placeholder, #header .searchform textarea:-moz-placeholder {
        line-height: 140%;
    }
}

在我看来，这有点奇怪，因为我知道供应商前缀用于针对不同的浏览器。那么，当您使用与父级相比不同的供应商前缀时，像这样的情况会怎样呢？这只是以前的程序员的错字吗？或者这是适用于某些场景的完全有效的规则？如果是，应用此规则时会出现什么情况？

Answer 1

看起来像是一个粗心的错误。没有已知的 Gecko 实现可以识别 -webkit-min-device-pixel-ratio — Gecko 使用的前缀是 min--moz-device-pixel-ratio相反，它已被弃用，取而代之的是标准化的分辨率。并且没有已知的 WebKit 或 Blink 实现可以识别 :-moz-placeholder。

无论哪种方式，这段 CSS 片段对于两个引擎来说都是毫无意义的。最好的情况是，在 WebKit/Blink 中，您会得到一个空的 @media 屏幕和 (...) {} 规则，而在 Gecko 中，you theoretically get @media not all { ... } ，这意味着“在任何情况下都不会应用此规则”。

---

¹ _{与问题中的代码不同，这不是拼写错误。}