DOCTYPE 阻止我的 div 显示答案

【问题标题】：DOCTYPE stops my div from showingDOCTYPE 阻止我的 div 显示
【发布时间】：2010-07-05 14:31:41
【问题描述】：

我有以下代码，正如预期的那样，在 Firefox 和 IE 中都显示了一个灰色矩形。只要我在前面添加一个 DOCTYPE（HTML 4.01 过渡），它就只显示一个空白页。在线验证器说文件没问题。怎么了？我应该关心 DOCTYPE 吗？

<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>

【问题讨论】：

标签： css html doctype

【解决方案1】：

您需要指定宽度和高度的单位。我假设您要使用像素：

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

【讨论】：

Doctype 声明并不总是触发标准模式，请参阅hsivonen.iki.fi/doctype/#handling
@Marcel Korpel：我回滚了我的答案。感谢您的链接 - 几乎完全忘记了标准模式！

【解决方案2】：

您尚未在 CSS 中指定高度和宽度属性的度量单位。如果没有 DOCTYPE，浏览器将尝试尽可能地呈现页面（QUIRKS 模式），在您的情况下，我认为它可能猜到了正确的单位。通过添加 DOCTYPE，您告诉浏览器在呈现页面时遵循一组非常具体的指令 - 不用猜测您想要像素而不是百分比。

【讨论】：

这是有道理的，但我认为在大多数浏览器中，Transitional 都会触发怪癖模式。或者这种混合模式（过渡）与怪癖模式（没有DOCTYPE）。
@Lèse。它比这更复杂一些。有关详细说明，请参阅 hsivonen.iki.fi/doctype/#handling。
我不认为过渡 DOCTYPE 与怪癖模式相同，即它仍然具有基于标准的规则，因为没有任何 DOCTYPE 完全取决于浏览器供应商。我认为有些怪癖符合过渡规则是巧合。
@Lèse 和 Dan – 完整的 HTML 4.01 过渡文档类型 (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">) 在大多数浏览器中触发“几乎标准模式”。见hsivonen.iki.fi/doctype/#handling

【解决方案3】：

你的 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>

【讨论】：

【解决方案4】：

高度和宽度的定义应该以像素、em或百分比为单位，例如：

width: 750px;
height: 548px;

【讨论】：

我个人更喜欢弗隆。
埃要精确得多。
感谢大家指出错误！在发现 CSS Validator 后自己发现了它。我被它在没有 DOCTYPE 的情况下工作的事实所欺骗，甚至在没有第二行的 DOCTYPE （“http:// 等）。PS。下次我尝试瑞典英寸（2.96 厘米）。