Why does my page break horribly in standards mode?_问答_开发者

Why does my page break horribly in standards mode?

开发者 https://www.devze.com 2023-02-09 06:03 出处：网络

My page is perfect with a doctype, and breaks horribly when one is applied. (More specifically, it breaks with any HTML4 doctype. An HTML3 one 开发者_开发技巧works fine, but that\'s clearly not accept

My page is perfect with a doctype, and breaks horribly when one is applied. (More specifically, it breaks with any HTML4 doctype. An HTML3 one 开发者_开发技巧works fine, but that's clearly not acceptable.)

As is typical, I have cut the page down to only include the minimum needed to demonstrate the problem, but the main problem remains.

Without doctype, desired:

Why does my page break horribly in standards mode?

With doctype, horribly broken:

Why does my page break horribly in standards mode?

And the code, of course. Add a doctype to break it.

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

And style.css:

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

Live demo: http://jsfiddle.net/ZcYwQ/