Zoom CSS 属性不适用于 Mac safari 浏览器

Question

我使用 gulp.spritesmith 生成精灵图像和 css。我的视网膜图像需要缩放 0.5 倍才能正确显示。它在除 Mac Safari 之外的所有浏览器和设备上都能完美运行。当图标类是锚标记的子级时，它在 Mac safari 上不起作用。以下是代码详细信息。

http://plnkr.co/edit/WNSLrTeZCVQSk1Ex2mTj?p=preview

后续工作

<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 上可以工作，但是由于我的代码已经具有 Zoom:.5，因此图像会缩小两次。请检查正在运行的 pluker 并帮助找出根本原因并提出一些解决方案。

Answer 1

Safari 不支持 IE 专有的zoomCSS 属性。

\n\n

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

\n\n

如果是任意元素，可以使用\xe2\x80\xa6

\n\n

-webkit-transform: scale(0.5);\ntransform: scale(0.5);\n

\n\n

\xe2\x80\xa6 来缩放它。

\n