css - 缩放 css 属性不适用于 Mac safari 浏览器

Question

我使用 gulp.spritesmith 生成 Sprite 图像和 css。我有需要放大 0.5 倍才能正确显示的视网膜图像。它在除 Mac Safari 之外的所有浏览器和设备上都运行良好。当图标类是 anchor 标记的子项时，它在 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 专有的 zoom CSS 属性。

有几种不同的方法。如果您要缩放背景图像，请使用 CSS background-size 属性指定图像的虚拟像素大小(或使用 100% 100% 来填充元素!)。

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

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

…缩放它。