Html 为什么我的页面在标准模式下会严重中断？_Html_Css_Quirks Mode

Html 为什么我的页面在标准模式下会严重中断？

html css

Html 为什么我的页面在标准模式下会严重中断？,html,css,quirks-mode,Html,Css,Quirks Mode,我的页面使用doctype非常完美，当应用doctype时会出现可怕的中断。（更具体地说，它与任何HTML4 doctype都不兼容。HTML3 doctype可以正常工作，但这显然是不可接受的。）正如典型的情况一样，我已经将页面缩减到只包含演示问题所需的最少内容，但主要问题仍然存在如果没有doctype，则需要：使用doctype，严重损坏：当然还有密码。添加doctype以将其打断 <html> <head> <title>Test</t

我的页面使用doctype非常完美，当应用doctype时会出现可怕的中断。（更具体地说，它与任何HTML4 doctype都不兼容。HTML3 doctype可以正常工作，但这显然是不可接受的。）

正如典型的情况一样，我已经将页面缩减到只包含演示问题所需的最少内容，但主要问题仍然存在

如果没有doctype，则需要：

使用doctype，严重损坏：

当然还有密码。添加doctype以将其打断

<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>


<div id="container1">
  <div id="main"></div>
</div>

<div id="container2">

    <div id="test1">
      <p style="text-align: center;">content goes here</p>
    </div>

    <div id="test2">
      <p style="text-align: center;">more content goes here</p>
    </div>

</div>

</body>
</html>

现场演示：

html{height:100%；}

左：0；底部：0和<代码>右侧：0；底部：0在#test1和#test2元素上


您必须为绝对定位的元素指定位置左/上
或右/下。谢谢！真的非常感谢你！这让我很恼火。
body
{
  margin: 0px;
  overflow:hidden;
  color: white;
  background-color: black;
  text-transform: lowercase;
  height: 100%;
}

#container1
{
  background-color: black;
  width: 100%;
  height: 75%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0%;

}

#main
{
  width: 800px;
  height: 480px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background-color: blue;
}

#container2
{
  background-color: black;
  width: 100%;
  height: 22%;
  margin-left: auto;
  margin-right: auto;
  position: relative;


}

#test1
{
  position: absolute;
  width: 50%;
  height: 100%;
  background-color: blue;
}

#test2
{
  position: absolute;
  width: 50%;
  margin-left: 50%;
  height: 100%;
  overflow: auto;
  background-color: green;
}