Safari 中的 CSS 缩放问题答案

【问题标题】：CSS Zoom Issue In SafariSafari 中的 CSS 缩放问题
【发布时间】：2014-07-14 13:31:46
【问题描述】：

我已经尝试 CSS 缩放属性已经有一段时间了。我拍摄了一张 1920X1200 尺寸的大图像并将其水平切成 10 块（1920X120 每块 10 块）。我正在像这样在网页上定位图像 -

<img src="images/img0_01.jpg" style="position:absolute; top:0px; left:0px;">
<img src="images/img0_02.jpg" style="position:absolute; top:120px; left:0px;">
.
.
.
<img src="images/img0_10.jpg" style="position:absolute; top:1080px; left:0px;">

然后我像这样对整个文档应用缩放 -

$("body").css("zoom","54%");

我期望将所有 10 个图像视为一个图像，并且我在 Firefox/Chrome 中看到了预期的结果。但是在 Safari 中，我看到图像之间的间隙（请参阅随附的屏幕截图）。如何解决？

注意所有图片的 margin、padding 和 border 设置为 0。图片的定位应只有 top 和 left 值是绝对值。

不胜感激任何形式的帮助。谢谢。

Live Demo

【问题讨论】：

我相信这是由于四舍五入造成的，不同的浏览器做的不同。 120 的 54% 是 64.8 - 不是偶数，并且依赖于浏览器进行舍入。而且您还要求浏览器将顶部位置舍入，而不仅仅是高度。可能相关：stackoverflow.com/a/16858031/870729
@cale_b 谢谢你的意见，我现在可以看到问题出在哪里了

标签： javascript jquery html css image

【解决方案1】：

我发现一种行之有效的快速破解方法是将图像仅分开 119 像素而不是 120 像素。在 Safari 上看起来好多了，在 chrome 上看起来仍然不错。

【讨论】：