如何将特定的CSS规则应用于Chrome？

有一个特定的DIV ，我想添加以下的CSS 

position:relative; top:-2px;

但我只想在Google Chrome中应用此function。 我怎样才能做到这一点？

CSS解决scheme

从https://jeffclayton.wordpress.com/2015/08/10/1279/ 

 /* Chrome, Safari, AND NOW ALSO the Edge Browser and Firefox */ @media 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解决scheme 

 if (navigator.appVersion.indexOf("Chrome/") != -1) { // modify button }

正如我们所知，Chrome是一个Webkit浏览器，Safari也是一个Webkit浏览器，同样也是Opera，因此使用媒体查询或者CSS黑客来定位Google Chrome是非常困难的，但是Javascript确实更加有效。

这里是一段JavaScript代码，将针对谷歌浏览器14和更高版本， 

  var isChrome = !!window.chrome && !!window.chrome.webstore;

下面是可用浏览器黑客列表，包括受影响的浏览器，谷歌浏览器，黑客

WebKit破解： 

 .selector:not(*:root) {}
  • 谷歌浏览器 ： 所有版本
  • Safari ： 所有版本
  • 歌剧：14岁以上
  • Android ： 所有版本

支持黑客： 

 @supports (-webkit-appearance:none) {}

Google Chrome 28和Google Chrome> 28，Opera 14和Opera> 14

  • Google Chrome ： 28和更高版本
  • 歌剧：14岁以上

财产/价值黑客： 

 .selector { (;property: value;); } .selector { [;property: value;]; }

Google Chrome 28和Google Chrome <28，Opera 14和Opera> 14以及Safari 7和less于7个。 – Google Chrome ： 28和之前 – Safari ： 7和之前 – Opera ：14和更高版本

JavaScript黑客：1 

 var isChromium = !!window.chrome;
  • 谷歌浏览器 ： 所有版本
  • 歌剧：14岁以上
  • Android ： 4.0.4

JavaScript黑客：2 {Webkit} 

 var isWebkit = 'WebkitAppearance' in document.documentElement.style;
  • 谷歌浏览器 ： 所有版本
  • Safari ： 3和更高版本
  • 歌剧：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 {} }
  • Google Chrome ： 29及更高版本
  • 歌剧 ： 16岁以上

欲了解更多信息，请访问此网站

Chrome> 29和Safari> 8的更新：

Safari现在也支持@supportsfunction。 这意味着这些黑客也将对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; } }

这个 CSS浏览器select器可以帮助你。 看一看。

CSS浏览器select器是一个非常小的JavaScript，只有一行授权CSSselect器。 它使您能够为每个操作系统和每个浏览器编写特定的CSS代码。

从来没有碰到一个实例，我不得不做一个Chrome的唯一的CSS的黑客直到现在。 但是，我发现这将移动内容下面的幻灯片清晰：两者; 在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; }

Chrome没有提供自己的条件来为它设置CSS定义！ 不应该有这样的需要，导致Chrome解释W3C标准定义的网站。

所以，你有两个有意义的可能性：

  1. 通过javascript获取当前浏览器（ 看这里 ）
  2. 通过php / serverside获取当前浏览器（ 看这里 ） 
 /* saf3+, chrome1+ */ @media screen and (-webkit-min-device-pixel-ratio:0) { /*your rules for chrome*/ #divid{ position:relative; top:-2px; } }

检查这个，为我工作。

如果你想我们可以添加类到特定的brwoser看[fiddle链接] [1] [1]： 

 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>

很简单。 只需在加载时向您的元素添加第二个类或id，以指定它是哪个浏览器。

所以基本上在前端，检测浏览器然后设置ID /类，你的CSS将被定义使用这些浏览器特定的名牌

http://www.templatemonster.com/help/how-to-create-browser-specific-css-rules-styles.html

只有通过使用.selector:not(*:root)才能将特定的CSS规则应用于Chrome .selector:not(*:root)与您的select器： 

 div { color: forestgreen; } .selector:not(*:root), .div1 { color: #dd14d5; } 
 <div class='div1'>DIV1</div> <div class='div2'>DIV2</div>

我正在使用混合风格的Chrome 29+ ，这是Chrome 29+借用Martin Kristiansson上面的解决scheme。 

 @mixin chrome-styles { @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) { @content; } }

像这样使用它： 

 @include chrome-styles { .header { display: none; } }
Interesting Posts