是否有仅限 Google Chrome 的 CSS hack？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10812093/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a Google Chrome-only CSS hack?
提问by Sandy
Is there a Google Chrome-only CSS hack? Many previously existing hacks that used to work for Chrome now are being picked up (used) by other browsers. I need one that targets Google Chrome, but not also other browsers like Mozilla Firefox, Safari, or Microsoft Edge.
是否有仅限 Google Chrome 的 CSS hack？许多以前适用于 Chrome 的黑客现在正在被其他浏览器采用（使用）。我需要一个针对 Google Chrome 的浏览器，而不是其他浏览器，如 Mozilla Firefox、Safari 或 Microsoft Edge。
回答by Alex
Sure is:
当然是：
@media screen and (-webkit-min-device-pixel-ratio:0)
{
#element { properties:value; }
}
And a little fiddle to see it in action - http://jsfiddle.net/Hey7J/
还有一点点看它在行动 - http://jsfiddle.net/Hey7J/
Must add tho... this is generally bad practice, you shouldn't really be at the point where you start to need individual browser hacks to make you CSS work. Try using reset style sheetsat the start of your project, to help avoid this.
必须补充...这通常是不好的做法，你真的不应该开始需要单独的浏览器黑客来让你的 CSS 工作。尝试在项目开始时使用重置样式表，以帮助避免这种情况。
Also, these hacks may not be future proof.
此外，这些黑客可能不是未来的证明。
回答by Yonatan Ayalon
Only Chrome CSS hack:
只有 Chrome CSS hack：
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
#selector {
background: red;
}
}
回答by revton
To work only chrome or safari, try it:
要仅使用 chrome 或 safari，请尝试：
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome */
.myClass {
color:red;
}
/* Safari only override */
::i-block-chrome,.myClass {
color:blue;
}}
回答by Jeff Clayton
Try to use the new '@supports' feature, here is one good hack that you might like:
尝试使用新的“@supports”功能，这是您可能喜欢的一个好技巧：
* UPDATE!!! *Microsoft Edge and Safari 9 both added support for the @supports feature in Fall 2015, Firefox also -- so here is my updated version for you:
* 更新！！！*Microsoft Edge 和 Safari 9 都在 2015 年秋季增加了对 @supports 功能的支持，Firefox 也 - 所以这是我为您更新的版本：
/* Chrome 29+ (Only) */
@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) {
.selector { color:red; }
}
More info on this here (the reverse... Safari but not Chrome): [ is there a css hack for safari only NOT chrome?]
此处的更多信息（相反... Safari 但不是 Chrome）：[是否有仅适用于 safari 而不是 chrome 的 css hack？]
The previous CSS Hack [before Edge and Safari 9 or newer Firefox versions]:
之前的 CSS Hack [Edge 和 Safari 9 或更新的 Firefox 版本之前]：
/* Chrome 28+ (now also Microsoft Edge, Firefox, and Safari 9+) */
@supports (-webkit-appearance:none) { .selector { color:red; } }
This worked for (only) chrome, version 28 and newer.
这适用于（仅）chrome，版本 28 和更新版本。
(The above chrome 28+ hack was not one of my creations. I found this on the web and since it was so good I sent it to BrowserHacks.com recently, there are others coming.)
（上面的 chrome 28+ hack 不是我的创作之一。我在网上找到了这个，因为它非常好，我最近将它发送到 BrowserHacks.com，还有其他人来了。）
August 17th, 2014 update: As I mentioned, I have been working on reaching more versions of chrome (and many other browsers), and here is one I crafted that handles chrome 35 and newer.
2014 年 8 月 17 日更新：正如我所提到的，我一直在努力实现更多版本的 chrome（以及许多其他浏览器），这是我制作的一个可以处理 chrome 35 和更新版本的版本。
/* Chrome 35+ */
_::content, _:future, .selector:not(*:root) { color:red; }
In the comments below it was mentioned by @BoltClock about future, past, not... etc... We can in fact use them to go a little farther back in Chrome history.
在下面的评论中，@BoltClock 提到了关于未来、过去、而不是……等等……事实上，我们可以使用它们在 Chrome 历史上走得更远一些。
So then this is one that also works but not 'Chrome-only' which is why I did not put it here. You still have to separate it by a Safari-only hack to complete the process. I have created css hacks to do this however, not to worry. Here are a few of them, starting with the simplest:
那么这是一个也可以工作但不是“仅限Chrome”的，这就是我没有把它放在这里的原因。您仍然必须通过仅 Safari 的 hack 将其分开才能完成该过程。我已经创建了 css hacks 来做到这一点，但是不用担心。以下是其中一些，从最简单的开始：
/* Chrome 26+, Safari 6.1+ */
_:past, .selector:not(*:root) { color:red; }
Or instead, this one which goes back to Chrome 22 and newer, but Safari as well...
或者相反，这个可以追溯到 Chrome 22 和更新版本，但 Safari 也是......
/* Chrome 22+, Safari 6.1+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm),
screen and(-webkit-min-device-pixel-ratio:0)
{
.selector { color:red; }
}
The block of Chrome versions 22-28 (more complicated but works nicely) are also possible to target via a combination I worked out:
Chrome 版本 22-28（更复杂但效果很好）的块也可以通过我制定的组合来定位：
/* Chrome 22-28 (Only!) */
@media screen and(-webkit-min-device-pixel-ratio:0)
{
.selector {-chrome-:only(;
color:red;
);}
}
Now follow up with this next couple I also created that targets Safari 6.1+ (only) in order to still separate Chrome and Safari. Updated to include Safari 8
现在跟进下一对我还创建了针对 Safari 6.1+（仅限）的内容，以便仍将 Chrome 和 Safari 分开。更新以包含 Safari 8
/* Safari 6.1-7.0 */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)
{
.selector {(; color:blue; );}
}
/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .selector { color:blue; }
So if you put one of the Chrome+Safari hacks above, and then the Safari 6.1-7 and 8 hacks in your styles sequentially, you will have Chrome items in red, and Safari items in blue.
因此，如果您将 Chrome+Safari hack 之一放在上面，然后将 Safari 6.1-7 和 8 hack 依次放入您的样式中，您将拥有红色的 Chrome 项目和蓝色的 Safari 项目。
回答by Jayden Lawson
You could use javascript. The other answers to date seem to also target Safari.
你可以使用javascript。迄今为止的其他答案似乎也针对 Safari。
if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
alert("You'll only see this in Chrome");
$('#someID').css('background-position', '10px 20px');
}
回答by atype
I have found this works ONLY in Chrome (where it's red) and not Safari and all other browsers (where it's green)...
我发现这仅适用于 Chrome（红色），而不适用于 Safari 和所有其他浏览器（绿色）...
.style {
color: green;
(-bracket-:hack;
color: red;
);
}
From http://mynthon.net/howto/webdev/css-hacks-for-google-chrome.htm
来自http://mynthon.net/howto/webdev/css-hacks-for-google-chrome.htm
