如何为Google Chrome添加特定的CSS？

Question

我需要添加一个仅适用于Google Chrome但不适用于Firefox的css代码。

问题：我想将一个border-bottom放在一个带有.div-special类的div中

 .div-special{
      border-bottom: 1px solid #c8c8c8;
 }

输出：边框底部应仅适用于Google Chrome浏览器，但不适用于Firefox。

请帮帮我。

Answer 1

@media screen and (-webkit-min-device-pixel-ratio:0) { 
 .div-special{
      border-bottom: 1px solid #c8c8c8;
 }
}

Answer 2

你可以试试这个

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .class{color:red;}
}

/* Safari only override */
::i-block-chrome,.class {
 color:blue;
}}

或

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

使用用户代理的JQuery

if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
    $('.container').hide();
}

Answer 3

@media screen and (-webkit-min-device-pixel-ratio:0) {
   // your CSS here
}