我试图找到一种方法来应用CSS只是Safari，但我发现一切也适用于Chrome。我知道这些目前都是WebKit浏览器，但我有问题的div对齐在Chrome和Safari;它们的显示方式不同。
我一直在尝试使用这个，但它也会影响Chrome:
@media screen and (-webkit-min-device-pixel-ratio:0) {
#safari { display: block; }
}
有人知道另外一个只适用于Safari的吗?
当前回答
如果你正在寻找Safari特定的浏览器黑客
我试过了，对我有效(只适用于Safari)
@supports (-webkit-hyphens:none){
@content
}
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
@content
}
}
其他回答
https://www.bram.us/2021/06/23/css-at-supports-rules-to-target-only-firefox-safari-chromium/#safari
@supports (background: -webkit-named-image(i)) {
//
}
{后h1:: 内容:“不”; margin-left: .3em; 颜色:红色; ｝ @supports (background: -webkit-named-image(i)) { {后h1:: 内容:“是的”; 颜色:绿色; ｝ ｝ <！DOCTYPE html > < html > < >头 < meta charset = " utf - 8 " > <meta name="viewport" content="width=device-width"> <标题> JS本< /名称> > < /头 身体< > <标题>旅行吗?< / h1 > 身体< / > < / html >
注意:如果只支持ios就足够了(如果你愿意牺牲Safari桌面)，那么这是可行的:
@supports (-webkit-overflow-scrolling: touch) {
/* CSS specific to iOS devices */
}
在(.myClass)中替换你的类
/*只支持Safari */ .myClass:没有(:根:根){ 在这里输入代码 }
我喜欢用下面的方法:
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">')
};
嗨，我做了这个，它为我工作
@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;
}
}
}
