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-size.您需要在后台后指定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; }
}