iPhone/Pad上令人討厭的右白色帶

Question

makepp的網站有一個簡單的3窗格佈局，帶有標題和窄導航，通常左浮動（但可以通過點擊第1個按鈕< LI>，或隱藏着×，以適應窄屏）：

+------------------------------+ 
+ div id="_head"    | 
+ width: 100%     | 
+-------------+----------------+ 
+ ul   | div id="_main" | 
+ width: 10em | width: auto | 
+-------------+----------------+ 
+ clear: both     | 
+------------------------------+ 

此頁面，用於驗證（除了一些玩弄schema.org）。所有的瀏覽器都可以正確顯示，iPhone/Pad除外。在那裏，我得到了一個小小的文字和一個無用的白色樂隊（可能和ul一樣寬）。

現在我發現有幾個人在這個iPhone bug的絆腳石，像最小寬度100％，似乎沒有工作，或一些蘋果特定的元首，這是怪誕的解決方案像荒謬爲IE6設計網頁...

在蘋果商店中，我發現MacOS上的Safari瀏覽器也受到這種影響，但它足夠漂亮，可以將白色帶子放在窗戶外面 - 您必須側向滾動才能看到它。我設法下載了螢火蟲，但不知何故它不知道這個白色區域，它似乎不屬於任何DOM部分。

我也發現Android也是如此：如果我向右滾動，我會得到這個空白區域。和（只有現在？）鉻20也是。這意味着我可以在本地進行調試，因此我在草圖中的4個元素的每一個上都放置了一個紅色背景：沒有一個伸入白色區域。

但是，如果我加上html{background-color:red;width:100%;min-width:100%;max-width:100%;}那就是紅色，寬度被忽略。

那麼，什麼是乾淨的解決方案，讓這個網頁無處不在？

Answer 1

好的，我在找錯地方。並排的_main和ul，可以向左或向右浮動或通過按鈕關閉，很難找到正確的。我以某種方式認爲是罪魁禍首。

但是現在我發現了一個完全不同的問題：標頭中的標籤是css sprites，iPhone/iPad有一個rect剪切錯誤。他們以光學方式獲得正確的圖像，但在幕後他們仍然使用未剪切的圖像來計算整體尺寸。而且由於我的組合精靈比那些顯示正確的部分更寬，所以有一個幻影突出。我已經重新排列了兩行的精靈，現在很好！

（WebKit是一個多站點需要註冊抽出時間來解釋自己的錯誤 - 無聊如果有人想從這裏挑這個時，它可以通過下載並安裝makepp upto 2.0.98.2轉載！）。