完全絕對定位佈局顯示空白

我正在一個網站上，並一直在使用絕對定位，因爲視口大小將始終是固定的（離線Web應用程序iphone）。中途我意識到我沒有使用適當的文檔類型聲明等。當我在瀏覽器中添加這些內容並刷新時，內容完全消失。完全絕對定位佈局顯示空白

一個代碼示例如下。沒有文檔類型和簡單的「」開放html標籤，內容就顯示出來了。如下所示，該頁面顯示爲完全空白。任何人都可以解釋爲什麼這不代碼工作在標準模式（與文檔類型等）？我可以改變什麼來修復它（最好是跨瀏覽器兼容） - 同時仍然使用絕對定位佈局？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <style type="text/css" media="screen"> 
     html { 
      overflow: hidden; 
      height: 100%; 
     } 

     body { 
      overflow: hidden; 
      padding: 0; 
      margin: 0; 
      width: 100%; 
      height: 100%; 
     } 
    </style> 

</head> 
<body> 
    <div style="position: absolute; visibility: visible; overflow-x: hidden; overflow-y: hidden; z-index: -1; top: 0; height: 480; left: 0; width: 320; text-align: left; " class="windowWrapper"> 
     <div style="position: absolute; visibility: visible; overflow-x: hidden; overflow-y: hidden; z-index: 0; top: 0; height: 480; left: 0; width: 320; text-align: left; " class="mobilePage"> 
      <div style="position: absolute; visibility: visible; overflow-x: hidden; overflow-y: hidden; z-index: 0; top: 0; height: 50; left: 0; width: 320; text-align: left; " class="mobileToolbar"> 
       <button style="position: absolute; visibility: visible; overflow-x: hidden; overflow-y: hidden; z-index: 0; top: 5; height: 40; left: 5; width: 60; text-align: center; " class="">Back</button> 
       <button style="position: absolute; visibility: visible; overflow-x: hidden; overflow-y: hidden; z-index: 0; top: 5; height: 40; left: 245; width: 70; text-align: center; " class="">Options</button> 
       <p style="position: absolute; visibility: visible; overflow-x: hidden; overflow-y: hidden; z-index: 0; top: 5; height: 40; left: 65; width: 180; text-align: center; " class="mobilePageTitle">Home</p> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

來源

2010-03-04 JoeS

如果在高度和寬度測量之後添加「px」以指示以像素爲單位的大小，則頁面應該顯示得更好。

例如。 width: 300px;

的嚴格標準模式將是大約需要您正確指定這些類型的東西更加嚴格。

可以使用W3C validator驗證網頁針對標準的正確性，我懷疑它會強調這些類型的問題。

來源

2010-03-04 11:35:29

謝謝!!!!!這就像一個魅力！我看了一些其他的例子，只是不知道我在做什麼，這是不同的。我會記住將來的驗證器... – JoeS 2010-03-04 11:44:32

完全絕對定位佈局顯示空白

回答

相關問題