我试图找到一种方法来应用CSS只是Safari，但我发现一切也适用于Chrome。我知道这些目前都是WebKit浏览器，但我有问题的div对齐在Chrome和Safari;它们的显示方式不同。
我一直在尝试使用这个，但它也会影响Chrome:
@media screen and (-webkit-min-device-pixel-ratio:0) {
#safari { display: block; }
}
有人知道另外一个只适用于Safari的吗?
当前回答
对于那些想要在Safari 7.0及以下版本而不是7.1及以上版本上实现黑客攻击的人，请使用:
.myclass { (;property: value;); }
.myclass { [;property: value;]; }
其他回答
嗨，我做了这个，它为我工作
@media(max-width: 1920px){
@media not all and (min-resolution:.001dpcm) {
.photo_row2 {
margin-left: 5.5% !important;
}
}
}
@media(max-width: 1680px){
@media not all and (min-resolution:.001dpcm) {
.photo_row2 {
margin-left: 15% !important;
}
}
}
@media(max-width: 1600px){
@media not all and (min-resolution:.001dpcm) {
.photo_row2 {
margin-left: 18% !important;
}
}
}
@media (max-width: 1440px) {
@media not all and (min-resolution:.001dpcm) {
.photo_row2 {
margin-left: 24.5% !important;
}
}
}
@media (max-width: 1024px) {
@media not all and (min-resolution:.001dpcm) {
@media {
.photo_row2 {
margin-left: -11% !important;
}
}
}
第一步:使用https://modernizr.com/
第二步:使用html类.regions只选择Safari
a { color: blue; }
html.regions a { color: green; }
Modernizr将根据当前浏览器支持的内容向DOM添加html类。Safari支持区域http://caniuse.com/#feat=css-regions，而其他浏览器不支持。这种方法在选择不同版本的IE时也非常有效。原力与你同在
您可以使用媒体查询hack从其他浏览器中选择Safari 6.1-7.0。
@media \\0 screen {}
免责声明:此攻击也针对旧Chrome版本(2013年7月之前)。
我喜欢用下面的方法:
var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
if (isSafari) {
$('head').append('<link rel="stylesheet" type="text/css" href="path/to/safari.css">')
};
顺便说一下，对于那些只需要在移动设备上使用Safari的人来说，只需在这个黑客中添加一个媒体查询:
@media screen and (max-width: 767px) {
_::-webkit-full-page-media, _:future, :root .safari_only {
padding: 10px; //or any property you need
}
}
别忘了把.safari_only类添加到你想要的目标元素中，例如:
<div class='safari_only'> This div will have a padding:10px in a mobile with Safari </div>
