我试图找到一种方法来应用CSS只是Safari,但我发现一切也适用于Chrome。我知道这些目前都是WebKit浏览器,但我有问题的div对齐在Chrome和Safari;它们的显示方式不同。
我一直在尝试使用这个,但它也会影响Chrome:
@media screen and (-webkit-min-device-pixel-ratio:0) {
#safari { display: block; }
}
有人知道另外一个只适用于Safari的吗?
我试图找到一种方法来应用CSS只是Safari,但我发现一切也适用于Chrome。我知道这些目前都是WebKit浏览器,但我有问题的div对齐在Chrome和Safari;它们的显示方式不同。
我一直在尝试使用这个,但它也会影响Chrome:
@media screen and (-webkit-min-device-pixel-ratio:0) {
#safari { display: block; }
}
有人知道另外一个只适用于Safari的吗?
当前回答
第一步:使用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时也非常有效。原力与你同在
其他回答
我已经测试过了,它对我很有效
@media only screen and (-webkit-min-device-pixel-ratio: 1) {
::i-block-chrome, .myClass {
height: 1070px !important;
}
}
它在safari中100%工作,我试过了
@media screen and (-webkit-min-device-pixel-ratio:0)
{
::i-block-chrome, Class Name {your styles}
}
对于那些想要在Safari 7.0及以下版本而不是7.1及以上版本上实现黑客攻击的人,请使用:
.myclass { (;property: value;); }
.myclass { [;property: value;]; }
适用于iOS 16和macOS Ventura:
@supports (font: -apple-system-body) and (-webkit-appearance: none) {
.body {
background-color: red;
}
}
在(.myClass)中替换你的类
/*只支持Safari */ .myClass:没有(:根:根){ 在这里输入代码 }