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

Question

有没有办法将以下 CSSdiv仅应用于 Google Chrome 中的特定内容？

position:relative;
top:-2px;

Answer 1

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 
}

Answer 2

众所周知，Chrome 是一个Webkit浏览器，Safari 也是一个 Webkit 浏览器，还有 Opera，所以很难针对 Google Chrome，使用媒体查询或 CSS hack，但 Javascript 确实更有效。

这是一段针对 Google Chrome 14 及更高版本的 Javascript 代码，

  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

• 谷歌浏览器：28 及更高版本
• 歌剧:14 及以后
• Firefox：64 及更高版本（即不再有效）

属性/价值黑客：

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

Google Chrome 28、Google Chrome < 28、Opera 14 和 Opera > 14、Safari 7 和小于 7。

• 谷歌浏览器：28 及之前
• Safari : 7 及之前
• 歌剧:14 及以后

JavaScript 黑客：1

var isChromium = !!window.chrome;

• 谷歌浏览器：所有版本
• 歌剧:14 及以后
• 安卓：4.0.4

JavaScript Hacks: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 {} }

• 谷歌浏览器：29 及更高版本
• 歌剧：16 岁及以后

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

Answer 3

chrome > 29 和 Safari > 8 的更新：

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

Answer 4

This css browser selector may help you. Take a look.

CSS Browser Selector is a very small javascript with just one line which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser.

Answer 5

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

仅通过使用您的选择器将特定的 CSS 规则应用于 Chrome .selector:not(*:root)：

div {
  color: forestgreen;
}
.selector:not(*:root), .div1 {
  color: #dd14d5;
}

<div class='div1'>DIV1</div>
<div class='div2'>DIV2</div>

Answer 6

到目前为止，我从未遇到过我不得不做一个仅限 Chrome 的 css hack 的实例。但是，我发现这会将内容移动到清晰的幻灯片下方：两者；在 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;
    }

Answer 7

接受的答案也与 Firefox 80+ 匹配。

要针对所有 Webkit 浏览器（Edge 79+、Chrome、Safari），请找到Firefox 不支持的-webkit特定 CSS 扩展（使用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，JS 可能是唯一的选择。

https://stackoverflow.com/a/25496712/1218408中的.selector:not(*:root) {}hack仍然排除 Firefox 到 92 版，但匹配 Safari。

Answer 8

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

所以基本上在前端，检测浏览器然后设置 id/class 和你的 css 将使用那些浏览器特定的名称标签

Answer 9

如果您愿意，我们可以将类添加到特定的浏览器，请参阅 [fiddle link][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>

Answer 10

Chrome 没有提供自己的条件来设置 CSS 定义！不需要这样做，因为 Chrome 会解释 w3c 标准中定义的网站。

因此，您有两种有意义的可能性：

1. 通过javascript获取当前浏览器（看这里）
2. 通过 php/serverside 获取当前浏览器（看这里）

Answer 11

我正在为 chrome 样式使用 sass mixin，这是为了Chrome 29+借用上面 Martin Kristiansson 的解决方案。

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

像这样使用它：

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

Answer 12

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
     /*your rules for chrome*/
     #divid{ 
         position:relative;
         top:-2px; 
     }
}

检查这个。它对我有用。