【发布时间】：2013-08-03 09:46:18
【问题描述】：
我有一个网页，我正在尝试显示图片。因为图像质量相对较高，所以我将图像拆分为四个 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，仅此而已。
【问题讨论】：
-
能贴出代码吗？
-
我无法发布整个 html/css，但正如我已经描述了问题中的所有相关部分：适用于我的图像元素的唯一属性是
display:block和 @987654325 @，在 firefox 检查器中验证。 -
请张贴代码。这显然是亚像素舍入问题，但你的解释对我来说没有意义。每个div中的图像吗？为什么是 100%？等需要代码来了解正在发生的事情并提出不同的方法。
-
添加了所有相关的 HTML。