Question

我的页面非常适合使用doctype，并且在应用某个文档时会出现可怕的破坏。（更具体地说，它打破了任何HTML4文档类型。一个HTML3工作正常，但这显然是不可接受的。）

通常情况下，我将页面缩小到仅包含演示问题所需的最低限度，但主要问题仍然存在。

没有doctype，希望： desired

使用doctype，可怕的破坏： enter image description here

当然是代码。添加一个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>

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

Answer 1

现场演示： http://jsfiddle.net/ZcYwQ/

html { height:100%; }
left:0; bottom:0;和right:0; bottom:0;关于＃test1和＃test2元素

为什么我的页面在标准模式下可怕？

1 个答案: