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

概述iOS7上的Safari有问题.问题是关于如何在iOS7上的Safari上使用精灵图像以及背景大小(我认为是这样).它在iOS7上的Chrome上运行良好,但Safari没有.正在使用的代码是： @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-rat 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的外观

解决方法 在safari / iOS7上,使用background属性时,background-size将被重置.
您需要在背景后指定background-property：

@media only screen and (-webkit-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; }}

总结

以上是内存溢出为你收集整理的html – Safari的iO7 CSS问题与背景大小全部内容，希望文章能够帮你解决html – Safari的iO7 CSS问题与背景大小所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。