是否有一种方法可以仅在 Google Chrome 中将以下 CSS 应用于特定的div？
position:relative;
top:-2px;
如何仅在Chrome浏览器中应用特定的CSS规则？
120
- user1213707
4
1可能是重复的问题：如何制作Chrome/Opera特定的样式表？ - Jakub
2你面临什么问题，迫使你这样做？针对特定浏览器的CSS规则并不是很好的设计，在大多数情况下，现在已经不再必要了。 - Pekka
@Pekka 这是我的问题 http://stackoverflow.com/questions/9311965/break-between-2-elements-is-leaving-gap-in-chrome ，我发现唯一的解决方案是只为 Chrome 添加这些，请帮忙 :( - user1213707
你原来的问题的答案没有帮到你吗？ - Pekka
14个回答
206
CSS 解决方案
来源：https://jeffclayton.wordpress.com/2015/08/10/1279/
/* Chrome, Safari, AND NOW ALSO the Edge Browser and Firefox */
@media screen and (-webkit-min-device-pixel-ratio:0) {
div{top:10;}
}
/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm) {
div{top:0;}
}
/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0) {
.selector {-chrome-:only(;
property:value;
);}
}
JavaScript解决方案
if (navigator.appVersion.indexOf("Chrome/") != -1) {
// modify button
}
- Martin Kristiansson
8
21这条规则将适用于 Safari 和 Chrome。 - Miuranga
1@AlirezaNoori 可能是因为它适用于 Chrome 和 Safari，而不仅仅是 Chrome。 - thom_nic
1CSS解决方案hack只适用于"仅Chrome"，如
@media screen and(-webkit-min-device-pixel-ratio:0) { } - 请注意 "and"后面的重要空格已被省略。但要小心：在CSS预处理器中，您需要找到一种避免它们进行更正的方法... - sebilasse2它也适用于IE Edge，请查看此链接https://jeffclayton.wordpress.com/2015/08/10/1279/。 - llamerr
1我在Angular中使用了
data-ng-class，并通过JS表达式添加了一个.chrome类。效果很好，谢谢。 - Kraken显示剩余3条评论
34
众所周知，Chrome是一款基于Webkit内核的浏览器，Safari也是一样，Opera也是。因此，使用媒体查询或CSS hack很难针对Google Chrome进行定位，但JavaScript确实更有效。
以下是一段JavaScript代码，它可以定位Google Chrome 14及更高版本：
var isChrome = !!window.chrome && !!window.chrome.webstore;
以下是可用的浏览器hack列表，包括Google Chrome和受该hack影响的浏览器。
WebKit hack：
.selector:not(*:root) {}
- 谷歌浏览器：所有版本
- Safari 浏览器：所有版本
- Opera 浏览器：14及更高版本
- Android 系统：所有版本
支持的Hack：
@supports (-webkit-appearance:none) {}
Google Chrome 28, and Google Chrome > 28, Opera 14 and Opera > 14
- 谷歌浏览器:28及以上版本
- 欧朋浏览器: 14及以上版本
- 火狐浏览器: 64及以上版本 (即不再适用)
属性/值Hack：
.selector { (;property: value;); }
.selector { [;property: value;]; }
谷歌浏览器28及以下版本，Opera浏览器14及以上版本，Safari浏览器7及以下版本。
- 谷歌浏览器：28及之前的版本
- Safari浏览器：7及之前的版本
- Opera浏览器：14及以后的版本
Javascript技巧：1
var isChromium = !!window.chrome;
- 谷歌浏览器:所有版本
- 欧朋浏览器 :14 及以上版本
- 安卓手机:4.0.4
JavaScript技巧:2 {Webkit}
var isWebkit = 'WebkitAppearance' in document.documentElement.style;
- 谷歌浏览器：所有版本
- Safari：3及更高版本
- Opera：14及更高版本
JavaScript技巧：3
var isChrome = !!window.chrome && !!window.chrome.webstore;
- 谷歌浏览器:14及以上版本
媒体查询黑客：1
@media \\0 screen {}
- 谷歌浏览器:22到28版本
- Safari:7及以上版本
媒体查询技巧:2
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }
- 谷歌浏览器:29及以上版本
- 欧朋浏览器:16及以上版本
获取更多信息，请访问此网站
- Hbirjand
7
正如Sebastian所说，@supports (-webkit-appearance:none) {}会影响Safari浏览器，在v.10上进行了测试。 - Dmitrii Malyshev
2
@supports (-webkit-appearance:none) { } 现在适用于 MS Edge。 - Vadim Ovchinnikov4@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }现在也会影响Firefox浏览器。 - Joe Salazar
1“supports hack” 匹配 Firefox 64+。 - ZachB
在Chrome 100中，window.chrome.webstore未定义，因此JavaScript检查无法工作。 - mhenry1384
显示剩余2条评论
12
Chrome版本大于29和Safari版本大于8的更新：
Safari现在也支持@supports功能。这意味着那些hack也适用于Safari。
我建议访问：http://codepen.io/sebilasse/pen/BjMoye
/* Chrome only: */
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
p {
color: red;
}
}
- sebilasse
1
9对我来说，在 FireFox 中该文本也为红色。 - Kerry7777
10
这个 CSS 浏览器选择器可能会对你有所帮助。请看一下。
CSS 浏览器选择器是一个非常小的 JavaScript 代码，只有一行，可以增强 CSS 选择器。它使你能够为每个操作系统和浏览器编写特定的 CSS 代码。
- tarashish
5
“CSS浏览器选择器”这个声明对于一个简单的JavaScript来说有点令人困惑。CSS本身并不支持任何浏览器的选择！ - Armin
抱歉，但这就是它的创建者所称呼的。我只是引用了他的话 :( - tarashish
作者非常夸张的措辞；-) - Armin
1是的，我不想为此添加大量的JS :( 但否则可能会有帮助。 - Jamie Hutber
主要问题在于它成为了一个脆弱的单点故障，因为它依赖于一个专门的程序员，并且需要跟踪他们的更改以保持最新。基本上，这是一种可疑的应对持续问题的方式，虽然它可能在短期内有所帮助，但并不能解决问题。 - Patanjali
9
使用
.selector:not(*:root)与您的选择器，仅对Chrome应用特定的CSS规则: http://www.templatemonster.com/help/how-to-create-browser-specific-css-rules-styles.html
div {
color: forestgreen;
}
.selector:not(*:root), .div1 {
color: #dd14d5;
}<div class='div1'>DIV1</div>
<div class='div2'>DIV2</div>- CodeGust
3
2这个黑科技对我很有用。那些依赖于屏幕分辨率的解决方案也会影响到 Firefox。 - Steve Breese
@stevebreese 注意到了，我怀疑这只适用于现代浏览器。 - Shasha
这个方案对我不起作用。但我喜欢森林绿色。 - Jesse Ivy
6
被接受的答案也适用于Firefox 80+。
要针对所有Webkit浏览器（Edge 79+，Chrome，Safari），找到一个 -webkit 特定的CSS扩展，这个扩展在Firefox中不被支持（使用 https://caniuse.com 查找）。这是一个动态的目标；WebKit浏览器之一可能会将其移除，而非WebKit浏览器可能会添加对其的支持。
以下是两个示例：
@supports(-webkit-text-security: circle) {
/* Matches Edge 79 - latest (92) */
/* Matches Chrome 4 - latest (95) */
/* Matches Safari 3.1 - latest (15/TP) */
/* Matches Opera 15 - latest (78) */
/* does not match Firefox */
}
@supports(-webkit-tap-highlight-color: black) {
/* Matches Edge 12 - latest (92) */
/* Matches Chrome 16 - latest (95) */
/* Matches Opera 15 - latest (78) */
/* does not match Safari */
/* does not match Firefox */
}
如果您确实需要只在Chrome中使用，JavaScript可能是唯一可行的方式。
.selector:not(*:root) {} 在https://dev59.com/aGox5IYBdhLWcg3wQSEO#25496712中的 hack 仍然不能在 Firefox 版本92和 Safari中匹配。
- ZachB
1
1不错，这是迄今为止（截至2022年1月）唯一有效的解决方案。 - deadweig-ht
4
直到现在，我从未遇到过必须要进行Chrome专用的CSS Hack的情况。然而，在这里我发现如果使用clear:both;属性并不能影响Chrome中幻灯片下面的内容（但其他浏览器甚至包括IE都正常工作）。
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome, if Chrome rule needed */
.container {
margin-top:100px;
}
/* Safari 5+ ONLY */
::i-block-chrome, .container {
margin-top:0px;
}
- Elaine
2
如果你想的话，我们可以给特定的浏览器添加一个类。
例子：
var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "Other";
this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
},
searchString: function (data) {
for (var i = 0; i < data.length; i++) {
var dataString = data[i].string;
this.versionSearchString = data[i].subString;
if (dataString.indexOf(data[i].subString) !== -1) {
return data[i].identity;
}
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index === -1) {
return;
}
var rv = dataString.indexOf("rv:");
if (this.versionSearchString === "Trident" && rv !== -1) {
return parseFloat(dataString.substring(rv + 3));
} else {
return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
}
},
dataBrowser: [
{string: navigator.userAgent, subString: "Edge", identity: "MS Edge"},
{string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
{string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
{string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
{string: navigator.userAgent, subString: "Opera", identity: "Opera"},
{string: navigator.userAgent, subString: "OPR", identity: "Opera"},
{string: navigator.userAgent, subString: "Chrome", identity: "Chrome"},
{string: navigator.userAgent, subString: "Safari", identity: "Safari"}
]
};
BrowserDetect.init();
var bv= BrowserDetect.browser;
if( bv == "Chrome"){
$("body").addClass("chrome");
}
else if(bv == "MS Edge"){
$("body").addClass("edge");
}
else if(bv == "Explorer"){
$("body").addClass("ie");
}
else if(bv == "Firefox"){
$("body").addClass("Firefox");
}
$(".relative").click(function(){
$(".oc").toggle('slide', { direction: 'left', mode: 'show' }, 500);
$(".oc1").css({
'width' : '100%',
'margin-left' : '0px',
});
});.relative {
background-color: red;
height: 30px;
position: relative;
width: 30px;
}
.relative .child {
left: 10px;
position: absolute;
top: 4px;
}
.oc {
background: #ddd none repeat scroll 0 0;
height: 300px;
position: relative;
width: 500px;
float:left;
}
.oc1 {
background: #ddd none repeat scroll 0 0;
height: 300px;
position: relative;
width: 300px;
float:left;
margin-left: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<div class="relative">
<span class="child">
○
</span>
</div>
<div class="oc">
<div class="data"> </div>
</div>
<div class="oc1" style="display: block;">
<div class="data"> </div>
</div>- neel upadhyay
1
如何仅将CSS应用于Chrome浏览器
如果您想仅将CSS应用于Chrome浏览器（Webkit / Blink），可以尝试下面的代码。请记住，还有其他使用Chrome Webkit引擎的浏览器...
@supports (not (-moz-appearance:button)) and (contain:paint) and (-webkit-appearance:none) {
body {
background: blue;
}
}
在2022年，这段代码运行得非常好，应该可以在大多数Chrome浏览器上运行，甚至可以追溯到2013年左右。它应该可以过滤掉所有的Internet Explorer、早期的Trident Edge、Firefox、Safari和许多其他浏览器。但请进行测试！
请注意，Microsoft Edge 83版本及更高版本于2020年5月从旧的Trident引擎切换到了Chrome的Blink浏览器引擎。因此，这也应该适用于较新的Edge浏览器。预计其功能与引擎基本相同！
关于此CSS的注意事项：
如上所述，上面的代码适用于所有共享某些现代版本的Chrome Webkit或Blink引擎的浏览器。在基于Chrome的引擎中，代码的两个主要决定因素是CSS功能at-rule @supports和较新的Chrome前缀属性-webkit-appearance:none的支持。综合起来，在Chrome中对两者的完全支持直到2013年5月才开始（我相信）。因此，您可以指望Chrome浏览器版本28到今天将或应该支持上述CSS hack。但是，请务必进行测试！
那么让我们来看看这个hack的工作原理.....
使用新的@supports at-rule或“特性检查”允许您的浏览器检查特定的CSS属性或特性及其值是否受用户浏览器的支持。问题在于很少有旧的甚至是新的浏览器支持@supports CSS技巧。直到2013年5月的浏览器发布，Chrome才真正支持它。因此，那将是最早支持Chrome浏览器的版本。请记住，Chrome直到2008年才发布，因此是一个较晚的浏览器。
但是，由于支持率仍然很低，浏览器不支持@supports是隐藏此CSS的主要方式。2010年之前的所有浏览器以及大多数2013年之前的浏览器都将忽略上面的规则。但是，从Chrome 27版本到今天，该规则将具有基线支持。 Microsoft Internet Explorer 1-11完全忽略它，只有Microsoft Edge版本83至今（2020至今）才能理解@supports规则。Firefox直到2019年才采用它，大多数Safari用户代理从2021年开始。因此，这是一个重要的过滤工具！
通用的“外观”CSS属性（非前缀版本）早在2006年就被Mozilla/Firefox支持，Chrome在2010年左右推出了带有部分功能支持的实验性前缀版本。Firefox前缀版本-moz-appearance和Chrome浏览器前缀版本-webkit-appearance似乎早期采用，因此可以在广泛的浏览器中找到支持。在Mozilla/Firefox浏览器中，“按钮”（2006年之前）比“none”更早得到采用，因此增加了过滤这些浏览器的机会。“appearance”的“none”在Chrome中是一个非常早期的支持属性值（2010年），因此被用来扩大可能的Chrome浏览器范围。因此，上述两个前缀规则都删除了最多的mozilla/Firefox浏览器，并扩大了代码中可能的Chrome浏览器。
因此，您可以假设从2013年至今的Chrome浏览器能够使用以下规则，并由所有使用Webkit引擎的浏览器看到。
逻辑（not (-moz-appearance:none))将CSS块从所有Mozilla/Firefox浏览器中隐藏。然而，当与对“@support”的有限支持相结合时，它确保排除了所有早期浏览器。
CSS属性contain:paint主要在2016年后得到Chrome和Firefox的支持。因此，这将排除Safari浏览器中的CSS块。但是，一些Safari iOS切换到了Webkit Chrome引擎。因此，contain:paint确保那些旧版Safari浏览器被排除在Chrome Webkit过滤器之外。
最后，Chrome前缀规则-webkit-appearance仅适用于Chrome Webkit浏览器。它确保下面的规则只能被Chrome看到。请记住，一些较新的Firefox浏览器开始支持Chrome前缀属性。但是通过上面的额外过滤器，它们现在已经从上面的CSS块中隐藏起来了。如上所述，-webkit-appearance:none已经被广泛采用，至少应该回溯到@support at-rules在Web浏览器中最早的采用日期。据我所知，那是在2013年5月左右。
因此，总之，上述CSS过滤器仅允许Chrome浏览器回溯到2013年的27版本和Microsoft Edge 83在2020年查看代码。
为什么我们需要为Chrome应用CSS？
自2010年以来，HTML5和CSS标准已经发生了变化。不再有W3C推荐标准，所有浏览器都会应用这些仔细协商的标准。这意味着浏览器供应商将不断地随机更改其浏览器（称为Evergreen），就CSS支持而言。这也意味着CSS将在运行时更改，代码分支很少对齐，其他所有浏览器中的CSS很少匹配彼此，并且上面的“hack”也可能会更改。
这个失败的Web标准运动是新CSS在浏览器和版本之间部分支持的基础，浏览器将越来越不相同，并且未来需要这些前缀的CSS hack。不好 :(
- Stokely
1
Safari 在这个 Chrome 的 CSS 规则中测试通过。 - undefined
1
很简单，只需在加载时为您的元素添加第二个类或ID，指定它是哪个浏览器即可。
基本上，在前端检测浏览器，然后设置ID/类，您的CSS将使用那些特定于浏览器的名称标签进行定义。
基本上，在前端检测浏览器，然后设置ID/类，您的CSS将使用那些特定于浏览器的名称标签进行定义。
- yan bellavance
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接