在Mac上的图像之间显示空白空间但在PC上不显示

Question

我有一个网页，我正在尝试显示图片。因为图像质量相对较高，我将图像分成四个JPEG文件并将它们一个显示在另一个下面。我有更好的加载时间。在所有浏览器的PC上，一切都很完美。当我搬到Mac时，我遇到了这个问题：

仔细观察图像，从上到下精确到75％，当第三张图像完成并显示第四张图像时，图像之间有一个很小的间隙。这不会发生在Windows（Firefox，IE，Chrome）上，主要发生在OS X（Firefox，Safari，Chrome）上。当我调整大小时，它可能会消失或出现在其他图像边界（即第一和第二条带之间，而不是第三和第四条带）。我不知道确切的原因（它可能与PC上的整数和Mac上的浮点有关），我需要解决它。 CSS没有什么特别之处，图像只显示为宽度为100％的块以适合容器。我试过玩填充和边距，但我不能让它工作。我可以通过设置类似margin:-0.2px的东西来摆脱它，但这显然是一个非常肮脏的解决方案，即使非常轻微，也会扭曲图像。

以下是代码，如果它有帮助：

<div class="photoborder" id="PhotoContainer" style="width: 536px; height: 354px; left: 376.5px;">
    <div style="" id="ContentDiv" onclick="unloadPhoto();">
        <img id="PhotoSlice0" src="/Content/2012/2/_MG_3097_8_9HDRI_ton_1292_0.jpg" class="partialimage">
        <img id="PhotoSlice1" src="/Content/2012/2/_MG_3097_8_9HDRI_ton_1292_1.jpg" class="partialimage">
        <img id="PhotoSlice2" src="/Content/2012/2/_MG_3097_8_9HDRI_ton_1292_2.jpg" class="partialimage">
        <img id="PhotoSlice3" src="/Content/2012/2/_MG_3097_8_9HDRI_ton_1292_3.jpg" class="partialimage"></div>
    <div style="opacity: 0;" id="PhotoInfoBgDiv" onmouseover="setOver(true);" onmouseout="setOver(false);">
    </div>
</div>

PhotoContainer具有绝对定位。 ContentDiv有overflow-x hidden，就是这样。

Answer 1

你在做什么对我来说似乎是一个非常糟糕的主意。除了造成这样的麻烦外，它还涉及对服务器的更多调用。有更好的选择。我的偏好是给图像一个大的宽度和高度（比如我希望它出现在屏幕上的宽度和高度的两倍），然后以相当低的质量保存图像。即使在视网膜显示器上，它看起来在屏幕上看起来非常清晰，并且通常是非常小的文件大小。这里有一篇很好的文章：http://blog.netvlies.nl/design-interactie/retina-revolution/（这是我最喜欢的响应图像/视网膜图像难题的解决方案。）

Answer 2

加载问题的解决方案可能是使用渐进式图像。

立即加载，锐度增加。它还会减小文件大小。