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 ¹ 相反，它已被弃用，取而代之的是标准化的 resolution。并且没有已知的 WebKit 或 Blink 实现可以识别 :-moz-placeholder。

不管怎样，这个 CSS 片段对两个引擎都没有意义。充其量，在 WebKit/Blink 中，您会得到一个空的 @media 屏幕和 (...) {} 规则，而在 Gecko 中，you theoretically get @media not all { ... } ，这意味着“此规则将永远不会在任何情况下应用”。

---

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