html - Safari 上的 iO7 CSS 问题与背景大小

Question

我在 iOS7 上遇到了 Safari 的问题。问题是关于在 iOS7 上的 Safari 和背景大小（我认为是这样的）上有视网膜的精灵图像。它在 iOS7 上的 Chrome 上运行良好，但在 Safari 上却不行。正在使用的代码是：

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) {

    footer ul.social li a { background-size: 48px 144px; }
    footer ul.social li a.fb { background: url(../images/socialx2.png) 0 0 no-repeat; }
    footer ul.social li a.in { background: url(../images/socialx2.png) 0 -48px no-repeat; }
    footer ul.social li a.tw { background: url(../images/socialx2.png) 0 -96px no-repeat; }

}

这是 IOS7 下 Safari 上的图像

Answer 1

在 safari / iOS7 上，使用背景属性时会重置背景大小。您需要在 background 之后指定 background-property ：

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) {
    footer ul.social li a.fb { background: url(../images/socialx2.png) 0 0 no-repeat; background-size: 48px 144px; }
    footer ul.social li a.in { background: url(../images/socialx2.png) 0 -48px no-repeat; background-size: 48px 144px; }
    footer ul.social li a.tw { background: url(../images/socialx2.png) 0 -96px no-repeat; background-size: 48px 144px; }
}