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 screen and (...) {}规则，在Gecko中，you theoretically get @media not all { ... }，这意味着＆＃34;这个规则永远不会应用于任何情况＆＃34;。

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

Answer 2

-webkit-min-device-pixel-ratio:0是针对Safari 3+和Chrome 1 +的浏览器黑客攻击。

input:-moz-placeholder是一个伪类，在Firefox 19中已被弃用，支持:: - moz-placeholder伪元素，仅针对Firefox浏览器。

鉴于您的代码要求您的代码只针对Safari和Chrome，然后才运行FireFox代码;它最终的代码在任何情况下都不会运行，而且很可能是错误的。

可在Safari 3+ / Chrome 1+ hack上阅读其他信息： https://css-tricks.com/snippets/css/browser-specific-hacks/

有关-moz-placeholder的更多信息，请访问： https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-placeholder

有关样式占位符文本的更多信息，请访问： https://css-tricks.com/snippets/css/style-placeholder-text/

一个供应商前缀在不同的供应商前缀内

2 个答案: