DOCTYPE阻止我的div顯示

我有下面的代碼，如預期的那樣，在Firefox和IE中都顯示一個灰色的矩形。只要我在前面添加一個DOCTYPE（HTML 4.01過渡），它就只顯示一個空白頁面。在線驗證人說該文件是好的。哪裏不對？我應該關心DOCTYPE嗎？DOCTYPE阻止我的div顯示

<html> 
<head> 
    <title>Title</title> 
    <meta http-equiv="content-type" content="text/html;charset=utf-8"> 
    <style type="text/css"> 
    #gallery 
    { 
     width:750; 
     height:548; 
     background-color: #f0f0f0; 
    } 
    </style> 
</head> 
<body> 
<div id="gallery"> 
</div> 
</body> 
</html>

來源

2010-07-05 Roman Redz

你的CSS是越野車。

width:750px; /* PX!! */ 
    height:548px; /* PX!! */

然後添加文檔類型。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
      "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <title>Title</title> 
    <meta http-equiv="content-type" content="text/html;charset=utf-8"> 
    <style type="text/css"> 
    #gallery 
    { 
     width:750px; 
     height:548px; 
     background-color: #f0f0f0; 
    } 
    </style> 
</head> 
<body> 
<div id="gallery"> 
</div> 
</body> 
</html>

來源

2010-07-05 14:35:01 galambalazs

您需要指定寬度和高度的單位。我以爲你會爲這樣的像素：

#gallery 
{ 
    width: 750px; 
    height: 548px; 
    background-color: #f0f0f0; 
}

來源

2010-07-05 14:35:12 BoltClock

Doctype聲明並不總是觸發標準模式，請參閱http://hsivonen.iki.fi/doctype/#handling – 2010-07-05 16:21:29

@Marcel Korpel：我回滾了我的答案。感謝您的鏈接 - 完全忘記了幾乎標準模式！ – BoltClock 2010-07-05 17:15:46

高度和寬度的定義應以像素爲單位的EM或百分比，如：

width: 750px; 
height: 548px;

來源

2010-07-05 14:36:05 MacMac

我個人比較喜歡furlongs。 – 2010-07-05 15:00:12

埃精確得多。 – 2010-07-05 17:19:02

感謝大家指出錯誤！在發現CSS Validator後，我自己發現了它。我被一個事實欺騙了，它沒有使用DOCTYPE，甚至沒有第二行的DOCTYPE（「http：// etc.）」。 PS。下一次我嘗試瑞典英寸（2.96釐米）。 – 2010-07-05 19:43:53

您還沒有指定的度量單位爲CSS中的高度和寬度屬性。如果沒有DOCTYPE，瀏覽器會嘗試儘可能渲染頁面（QUIRKS模式），在您的情況下，我認爲它可能會猜到正確的單位。通過添加DOCTYPE，您告訴瀏覽器在渲染頁面時遵循一組非常具體的指令 - 不要猜測您需要像素而不是百分比。

來源

2010-07-05 14:38:59

這很有道理，但我認爲在大多數瀏覽器中，Transitional觸發怪癖模式，或者這種混合模式（過渡）與怪癖模式（沒有'DOCTYPE'） – 2010-07-05 14:58:32

@Lèse，它比這更復雜一點，參見http://hsivonen.iki。 fi/doctype /＃處理以獲得徹底解釋 – Alohci 2010-07-05 15:09:08

我不認爲過渡DOCTYPE與怪癖模式相同，即它仍然有基於標準的規則，因爲沒有DOCTYPE完全取決於瀏覽器供應商。它是巧合的，有些怪癖符合過渡規則。 – 2010-07-05 15:11:02

DOCTYPE阻止我的div顯示

回答

相關問題