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

Question

我在 iOS7 上使用 Safari 时遇到问题。问题是关于在 iOS7 上的 Safari 和背景大小(我认为是这样)上有视网膜的 Sprite 图像。它在 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 属性时会重置背景大小。您需要在背景后指定背景属性:

@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; }
}