背景圖片不會在iOS上顯示，但在其他瀏覽器上顯示得很好

我們有一個關於我們的Magento網站的背景信息，由於內容數量的限制，我們會根據需要進行擴展。它似乎在個人電腦和（希望Mac）上工作得很好。但在任何iOS設備上，都不顯示白色背景。背景圖片不會在iOS上顯示，但在其他瀏覽器上顯示得很好

我已經收錄了兩張屏幕截圖 - 它是在普通的PC瀏覽器中看起來的樣子，也是一張在iPhone上看起來如何的樣子。

這裏是直接鏈接到該圖像未顯示在iOS設備上了： http://tinyurl.com/bcovmvg

謝謝！

2013-01-09 Jonathan

這是它應該如何看（用文字和照片背後的白色背景。這也是波爾卡圓點的背景之上。請參閱此鏈接的圖像（由於我是本網站的新會員，因此我無法上傳圖片）： http://tinyurl.com/b6a7k3q 這就是它在iOS設備上的外觀： http://tinyurl.com/ aphho7f 公告白色背景是如何丟失的。另外，是什麼原因造成在iPhone上點，黑線出現？ – Jonathan

您有一個名爲.box_top的類。在裏面你有一個float：left;我不知道爲什麼，但嘗試刪除它並用溢出替換它：隱藏。至少在FireFox和IE9中他們是。

.box_top { 
    background: url("../images/box_top.png") no-repeat scroll center top transparent; 
    display: block; 
    overflow: hidden; 
    width: 1002px; 
}

另外，刪除邊距：0 0 -5px。這會導致邊框外側每個框底部的灰色陰影。

來源

2013-01-09 07:15:59 ZombieCode

謝謝。我刪除其刪除了灰色的影子......我從來沒有保證金注意到那個。另外，我嘗試更換float：left：overflow，但這並沒有讓box_top圖像顯示在我的iPhone上。當我使用overflow：hidden時，它也會切斷掉白色內容部分的箭頭的右端。 – Jonathan

順便說一句 - 我改回它浮動：現在左... – Jonathan

我在自己的電腦（PC）Safari瀏覽器中檢查它，它顯示好，所以它必須是移動項目。我會創建一個基本頁面，並開始向您的主頁添加元素。當你去看什麼CSS類導致背景消失時，測試每一步。 – ZombieCode

這是iOS 6.0中的一個新bug，其中沒有以「隔行掃描」OFF保存的PNG圖像不顯示，或者有時甚至全黑。嘗試用「隔行掃描」設置保存PNG文件，以「關」

來源

2013-02-22 21:45:56

沒有什麼神祕，爲什麼該圖像不會在iOS中顯示，圖像尺寸爲978x10000像素（是10,000）。儘管磁盤上只有167 kB，但當擴展到內存時，它是巨大的。

從Safari Web Content Guide：

用於解碼GIF，PNG，和TIFF圖像的最大尺寸爲小於256 MB RAM設備3百萬像素和5百萬像素用於與大於或等於256的設備 MB RAM。

即，確保寬×高≤3 * 1024 * 1024用於與設備小於256 MB RAM。請注意，解碼後的尺寸遠大於圖像的編碼尺寸的。

除了在iOS Safari上不顯示，您肯定會在其他瀏覽器上消耗大量內存。當然你可以分開圖像的「頂部」和「側面」部分，並使用background-repeat來平鋪兩側。沒有理由讓這個東西的「邊」部分的高度超過50px。

這不是隔行掃描問題，圖像encoded without interlacing

來源

2013-02-22 23:24:33 steveax

背景圖片不會在iOS上顯示，但在其他瀏覽器上顯示得很好

回答

相關問題