在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隐藏了溢出-x，仅此而已。

Answer 1

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

Answer 2

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

它将立即加载，并增加清晰度。 它还将减小文件大小。