html - 在 Mac 上图像之间显示空白，但在 PC 上不显示

Question

我有一个网页，我正在尝试显示图像。因为图像质量相对较高，所以我将图像分成四个 JPEG 文件并依次显示。我得到更好的加载时间。在所有浏览器上，一切都在 PC 上完美运行。当我转移到 Mac 时，我遇到了这个问题:

仔细观察图像，在从上到下刚好 75% 处，当第三张图像完成并显示第四张图像时，图像之间有一个细小的间隙。这不会发生在 Windows(Firefox、IE、Chrome)上，主要发生在 OS X(Firefox、Safari、Chrome)上。当我调整它的大小时，它可能会消失或出现在其他图像边界(即在第一条和第二条之间而不是第三条和第四条之间)。我不知道确切的原因(这可能与在 PC 上是整数而在 Mac 上是 float 有关)，我需要解决它。 CSS 没有什么特别之处，图像只是显示为宽度为 100% 的 block 以适合容器。我试过填充和边距，但我无法让它工作。我可以通过设置类似 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，仅此而已。

Answer 1

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