Question

我使用gulp.spritesmith生成精灵图像和css。我有视网膜图像需要缩放.5才能正确显示。它适用于除Mac Safari之外的所有浏览器和设备。当图标类是锚标记的子项时，它不适用于Mac safari。以下是代码详细信息。

以下工作

<div>
      <span class="rating-50"></span>
</div>

以下无效

<a href="#">
      <span class="rating-50"></span>
</a>

以下是进行图标缩放的类详细信息。

.rating-50{
zoom:.5;
-moz-transform:scale(.5);
-moz-transform-origin:0 0;
}

我做了一些研究，发现-webkit-transform：scale（.5）;因为我的代码已经具有缩放功能，因此可以在Mac Safari上运行：.5因此图像缩小了两倍。请通过运行的pluker并帮助找出根本原因并提出一些解决方案。

Answer 1

Safari不支持IE专有的zoom CSS属性。

有几种不同的方法。如果要缩放它的背景图像，请使用CSS background-size属性指定图像在虚拟像素中的大小（或使用100% 100%填充元素！）。

如果它是一个任意元素，你可以使用......

-webkit-transform: scale(0.5);
transform: scale(0.5);

...来扩展它。