如何仅在Chrome浏览器中应用特定的CSS规则？

Question

如何仅在Chrome浏览器中应用特定的CSS规则？

120

是否有一种方法可以仅在 Google Chrome 中将以下 CSS 应用于特定的div？

position:relative;
top:-2px;

- user1213707

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个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- svnm · Answer 1

我正在使用一个针对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; }
}

- Vit Bernatik · Answer 2

我们正在使用JavaScript来检测Chrome（和平台）并更改样式。您可以使用下面的代码：

/* Find existing css selector
selectorName: selector name eg: ".myCssStyle"
*/
function cssFindSelector(selectorName){
    //console.log( "document.styleSheets.length: "+document.styleSheets.length);
    for(var i=0; i<document.styleSheets.length; i+=1){
        var sheet = document.styleSheets[i];
        for(var j=0; j<sheet.cssRules.length; j+=1){
            var selTxt = sheet.cssRules[j].selectorText;
            //console.log("selTxt:"+selTxt)
            if (selTxt == selectorName){
                return [i,j];
            }
        }
    }
    return null;
}

/* change existing css style
selectorName = existing css style to change ".myCssStyle"
newStyleStr = new style eg: "{color:red; border:1px;}"
*/
function cssChangeStyle(selectorName, newStyleStr){
    var idx = cssFindSelector(selectorName)
    if(idx == null){
        return false;
    }
    var sheet = document.styleSheets[idx[0]];
    sheet.deleteRule(idx[1]);
    sheet.insertRule(selectorName+" "+newStyleStr,idx[1]);
    return true;
}


function changeStyleFor_chrome(){
    var txtUserAgent = navigator.userAgent; 
    ////my mobile: 
    //navigator.userAgent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Mobile Safari/537.36
    //my laptop:
    //navigator.userAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36
    // iPhone from Mari:
    //navigator.userAgent: Mozilla/5.0 (iPhone; CPU iPhone OS 16_6_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Mobile/15E148 Safari/604.1
    //let n = txtUserAgent.search(/windows/i);
    //let n = txtUserAgent.search(/iPhone/i);
    let n = txtUserAgent.search(/Chrome/i);
    let n2 = txtUserAgent.search(/iPhone/i); 
    if(n >= 0){
        //console.log("agent chrome");
        // here you shall put your style that you want to change for chrome 
        // note that style shall already exists!
        var ret = cssChangeStyle(".myStyleChameleon", "{ color: red!important;}");
        //console.log("ret: "+ret);
        if(n2>0){
          //chrom on iPhone
        }
    }
}


window.onload = changeStyleFor_chrome;

.myStyleChameleon {
    color: green;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Change style by JavaScript only for Chrome</h2>
<div class="myStyleChameleon"> This text is GREEN for everything
 except for Google Chrome where it is RED</div>
</body>
</html>

请注意，iPhone和Mac上的Google Chrome显示网页的方式不同（特别是我们在background-position:fixed方面遇到了问题）。因此，我建议还要检测平台。

另外，请注意，纯CSS的hack通常会同时针对Safari和Chrome，并且对于不同版本，不同的hack开始和停止起作用。换句话说，我认为仅仅使用CSS来可靠地实现这一点是不可能的。因此，我建议只使用JavaScript来完成。

- Armin · Answer 3

0

Chrome没有自己的条件语句来设置CSS定义，仅适用于它！没有必要这样做，因为Chrome会像W3C标准中定义的那样解释网站。

所以，您有两个有意义的选择：

通过JavaScript获取当前浏览器（点此查看）
通过php/服务器端获取当前浏览器（点此查看）

- Armin

4

申请Chrome而不是Safari或Firefox的理由肯定存在，例如，浏览器呈现<select>元素的方式有所不同。仅使用CSS的解决方案比涉及服务器或客户端代码要干净得多。 - thom_nic

2

Chrome并不完美。就像任何其他软件一样，它也有漏洞，包括在渲染引擎中，其中一些在几年后仍未修复。因此，能够检测Chrome以抵消这些漏洞的影响非常重要。https：//bugs.chromium.org/p/chromium/issues/list？num=100&start=60000 - Joe Salazar

不仅 CSS 需要针对 Chrome 进行特定处理。假设您想要使用 Chrome 的 #:~:text=... 功能（如果可用），但是在其他情况下，您想要使用 #nearestanchor？很遗憾，我们没有旧的 IE 条件 hack：。 - Dave Burton

- ashanrupasinghe · Answer 4

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

看看这个，它对我有用。