有没有办法将以下CSS仅应用于Google Chrome中的特定div？
position:relative;
top:-2px;
答案 0 :(得分：188)
CSS解决方案
来自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解决方案
if (navigator.appVersion.indexOf("Chrome/") != -1) {
// modify button
}
答案 1 :(得分：24)
众所周知，Chrome浏览器是Webkit浏览器，Safari也是Webkit浏览器，也是Opera，因此使用媒体查询或CSS黑客攻击谷歌Chrome很困难，但是Javascript确实更有效。
以下是针对Google Chrome 14及更高版本的Javascript代码，
var isChrome = !!window.chrome && !!window.chrome.webstore;
及以下是可用浏览器黑客的列表，包括受影响的浏览器的谷歌浏览器，黑客
.selector:not(*:root) {}
@supports (-webkit-appearance:none) {}
Google Chrome 28和Google Chrome＆gt; 28，Opera 14和Opera＆gt; 14
.selector { (;property: value;); }
.selector { [;property: value;]; }
Google Chrome 28和Google Chrome＆lt; 28，Opera 14和Opera＆gt; 14，Safari 7和少于7。 - Google Chrome ： 28和之前 - Safari ： 7和之前 - Opera ：14及以后
var isChromium = !!window.chrome;
var isWebkit = 'WebkitAppearance' in document.documentElement.style;
var isChrome = !!window.chrome && !!window.chrome.webstore;
@media \\0 screen {}
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }
有关详细信息，请访问this website
答案 2 :(得分：12)
chrome＆gt;的更新29和Safari＆gt; 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;
}
}
答案 3 :(得分：6)
This css浏览器选择器可以帮助您。看一看。
CSS浏览器选择器是一个非常小的javascript，只有一行 它赋予CSS选择器权力。它让你有能力写作 每个操作系统和每个浏览器的特定CSS代码。
答案 4 :(得分：4)
http://www.templatemonster.com/help/how-to-create-browser-specific-css-rules-styles.html
只有将.selector:not(*:root)与您的选择器一起使用才能将特定的CSS规则应用于Chrome：
div {
color: forestgreen;
}
.selector:not(*:root), .div1 {
color: #dd14d5;
}<div class='div1'>DIV1</div>
<div class='div2'>DIV2</div>
答案 5 :(得分：2)
直到现在，我从未遇到过必须执行仅限Chrome的css hack的实例。但是，我发现这可以将内容移到幻灯片放映的下方：两个;在Chrome中没有任何影响（但在其他任何地方都运行良好 - 甚至是IE！）。
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var url = "your url/api/v1";
var credentials = { username: "USERNAME", password: "PASSWORD" };
$.post(url + "/auth", credentials, function (response) {
var ticket = response.ticket;
alert(response)
});
</script>
</head>
<body>Hi</body>
</html>
答案 6 :(得分：1)
Chrome不提供自己的条件来为它设置CSS定义！不应该这样做，因为Chrome会解释w3c标准中定义的网站。
所以，你有两个有意义的可能性：
答案 7 :(得分：1)
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
/*your rules for chrome*/
#divid{
position:relative;
top:-2px;
}
}
检查一下。这对我有用。
答案 8 :(得分：1)
这么简单。只需在加载时向您添加第二个类或id，指定它是哪个浏览器。
所以基本上在前端，检测浏览器然后设置id / class，你的css将使用那些特定于浏览器的名称标签来定义
答案 9 :(得分：1)
如果你想我们可以添加类给特定的brwoser看[小提琴链接] [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>
答案 10 :(得分：1)
我正在使用sass mixin进行chrome样式，这是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; }
}