Question

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

Answer 1

您需要指定宽度和高度的单位。我假设你要像素那样：

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

Answer 2

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

Answer 3

你的CSS有问题。

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

然后添加doctype。

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

Answer 4

高度和宽度的定义应以像素，em或百分比表示，例如：

width: 750px;
height: 548px;

DOCTYPE阻止我的div显示

4 个答案: