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

Question

提问by user1213707

Is there a way to apply the following CSS to a specific divonly in Google Chrome?

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

position:relative;
top:-2px;

Answer 1

回答by Martin Kristiansson

CSS Solution

CSS 解决方案

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

来自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 Solution

JavaScript 解决方案

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

Answer 2

回答by Hbirjand

As we know,Chrome is a Webkitbrowser,Safari is a Webkit browser too,and Also Opera,so it's very hard to target the Google Chrome,using media queries or CSS hacks,but Javascript is really more effective.

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

Here is the piece of Javascript code that will target Google Chrome 14 and later,

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

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

and below is a list of Available Browser hacks,for the Google chrome including the influenced browser,by that hack

以下是可用浏览器黑客的列表，对于谷歌浏览器，包括受影响的浏览器，由该黑客

WebKit hack:

WebKit 黑客：

.selector:not(*:root) {}

Google Chrome:All the versions
Safari:All the versions
Opera :14 and Later
Android:All the versions

谷歌浏览器：所有版本
Safari：所有版本
歌剧：14 岁及以后
安卓：所有版本

Supports Hacks:

支持黑客：

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

Google Chrome 28,and Google Chrome > 28, Opera 14 and Opera > 14

谷歌浏览器 28、谷歌浏览器 > 28、Opera 14 和 Opera > 14

Google Chrome:28 and Later
Opera :14 and Later

谷歌浏览器：28 及更高版本
歌剧：14 岁及以后

Property/Value Hacks:

财产/价值黑客：

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

Google Chrome 28,and Google Chrome < 28, Opera 14 and Opera > 14,and Safari 7 and Less than 7. - Google Chrome:28 and Before- Safari:7 and Before- Opera :14 and Later

谷歌浏览器28，和谷歌Chrome浏览器<28，14歌剧院和Opera> 14，和Safari 7且小于7 -谷歌浏览器：28和前- Safari浏览器：7和前-歌剧：14及更高版本

JavaScript Hacks:1

JavaScript 技巧：1

var isChromium = !!window.chrome;

Google Chrome:All the versions
Opera :14 and Later
Android:4.0.4

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

JavaScript Hacks:2 {Webkit}

JavaScript 技巧：2 {Webkit}

var isWebkit = 'WebkitAppearance' in document.documentElement.style;

Google Chrome:All the versions
Safari:3 and Later
Opera :14 and Later

谷歌浏览器：所有版本
Safari: 3 及更高版本
歌剧：14 岁及以后

JavaScript Hacks:3

JavaScript 技巧：3

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

Google Chrome:14 and Later

谷歌浏览器：14 及更高版本

Media Query Hacks:1

媒体查询技巧：1

@media \0 screen {}

Google Chrome:22 to 28
Safari:7 and Later

谷歌浏览器：22 到 28
Safari：7 及更高版本

Media Query Hacks:2

媒体查询技巧：2

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }

Google Chrome:29 and Later
Opera:16 and Later

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

For more information please visit this website

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

Answer 3

回答by sebilasse

An update for chrome > 29 and Safari > 8 :

chrome > 29 和 Safari > 8 的更新：

Safari now supports the @supportsfeature too. That means those hacks would also be valid for Safari.

Safari 现在也支持该@supports功能。这意味着这些 hack 也适用于 Safari。

I would recommend

我会推荐

@ 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

回答by tarashish

Thiscss browser selector may help you. Take a look.

这个css 浏览器选择器可能会帮助你。看一看。

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.

CSS 浏览器选择器是一个非常小的 javascript，只有一行代码可以为 CSS 选择器提供支持。它使您能够为每个操作系统和每个浏览器编写特定的 CSS 代码。

Answer 5

回答by CodeGust

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

Apply specific CSS rules to Chrome only by using .selector:not(*:root)with your selectors:

仅通过.selector:not(*:root)与选择器一起使用，才能将特定的 CSS 规则应用于 Chrome ：

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

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

Answer 6

回答by Elaine

Have never run across an instance where I had to do a Chrome-only css hack until now. However, I found this to move content below a slideshow where clear:both; affected nothing in Chrome (but worked fine everywhere else - even IE!).

到目前为止，我从未遇到过我必须进行仅 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

回答by neel upadhyay

if you want we can add class to specific brwoser see [fiddle link][1] [1]:

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

回答by svnm

I am using a sass mixin for chrome styles, this is for Chrome 29+borrowing the solution from Martin Kristiansson above.

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

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

Use it like this:

像这样使用它：

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

Answer 9

回答by yan bellavance

So simple. Just add a second class or id to you element at load time that specifies which browser it is.

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

So basically at the front end, detect browser then set id/class and your css will be befined using those browser specific nametags

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

Answer 10

回答by ashanrupasinghe

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

check this.it work for me.

检查这个。它对我有用。

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

提问by user1213707

回答by Martin Kristiansson

回答by Hbirjand

WebKit hack:

WebKit 黑客：

Supports Hacks:

支持黑客：

Property/Value Hacks:

财产/价值黑客：

JavaScript Hacks:1

JavaScript 技巧：1

JavaScript Hacks:2 {Webkit}

JavaScript 技巧：2 {Webkit}

JavaScript Hacks:3

JavaScript 技巧：3

Media Query Hacks:1

媒体查询技巧：1

Media Query Hacks:2

媒体查询技巧：2

回答by sebilasse

回答by tarashish

回答by CodeGust

回答by Elaine

回答by neel upadhyay

回答by svnm

回答by yan bellavance

回答by ashanrupasinghe

相关推荐

最近更新

标签

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

提问by user1213707

回答by Martin Kristiansson

回答by Hbirjand

WebKit hack:

WebKit 黑客：

Supports Hacks:

支持黑客：

Property/Value Hacks:

财产/价值黑客：

JavaScript Hacks:1

JavaScript 技巧：1

JavaScript Hacks:2 {Webkit}

JavaScript 技巧：2 {Webkit}

JavaScript Hacks:3

JavaScript 技巧：3

Media Query Hacks:1

媒体查询技巧：1

Media Query Hacks:2

媒体查询技巧：2

回答by sebilasse

回答by tarashish

回答by CodeGust

回答by Elaine

回答by neel upadhyay

回答by svnm

回答by yan bellavance

回答by ashanrupasinghe

相关推荐

CSS 当屏幕分辨率改变时，如何让我的网站自动调整大小？

CSS 背景图像在 Chrome 中消失

CSS 多个字体权重，一个@font-face 查询

CSS 如何水平对齐我的 div？

相关推荐

最近更新

标签