在Mac上的圖像之間顯示的空白空間但不在PC上

我有一個網頁，我試圖顯示圖像。由於圖像質量相對較高，因此我將圖像分成四個JPEG文件並將它們一個顯示在另一個之下。我用這個更好的加載時間。在所有瀏覽器上，一切都可以在個人電腦上運行。當我移動到Mac，我有這樣的問題：在圖像在Mac上的圖像之間顯示的空白空間但不在PC上

仔細一看，正好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，就是這樣。

來源

2013-08-03 Can Poyrazoğlu

你可以發佈代碼嗎？ – user1721135

我不能發佈整個HTML/CSS，但正如我已經描述了問題中的所有相關部分：適用於我的圖像元素的唯一屬性是'display：block'和'width：100％'，在Firefox檢查員驗證。 –

請發佈代碼。這顯然是子像素四捨五入問題，但你的解釋對我沒有意義。每個div中的圖像都是？爲什麼100％？等需要編碼來了解發生了什麼並提出不同的方法。 – user1721135

你在做什麼對我來說似乎是一個非常糟糕的主意。除了造成這樣的麻煩之外，它還涉及到更多的服務器調用。有更好的選擇。我的首選是給圖像一個很大的寬度和高度（比如我希望它出現在屏幕上的寬度和高度的兩倍），然後以相當低的質量保存圖像。它出現在屏幕上，甚至在視網膜顯示器上看起來非常清晰，並且通常是非常小的文件大小。這裏有一篇很好的文章：http://blog.netvlies.nl/design-interactie/retina-revolution/（這是我最喜歡的解決方案，以響應圖像/視網膜圖像難題。）

來源

2013-08-03 10:02:33

因爲所有的圖像已經在服務器上，所以它太晚了。與將圖像作爲單個文件加載相比，它工作得很快且很好。你的解決方案可能會更好，但它太晚了，我需要一個具體的解決方案，我不能從頭開始改變系統。 –

加載問題的解決方案可能是使用漸進式圖像。

它會立即加載，並提高清晰度。它也會減小文件大小。

來源

2013-08-03 10:06:40 user1721135

我不能改變圖像，有數百個，我不能從頭開始處理它們。我需要一個解決方案，我已經在手 –

@CanPoyrazoğlu只是在一批而不是一次一個 –

在Mac上的圖像之間顯示的空白空間但不在PC上

回答

相關問題