我的页面在文档类型方面非常完美，但在应用文档类型时会严重崩溃。 (更具体地说，它破坏了任何 HTML4 文档类型。HTML3 文档类型可以正常工作，但这显然是 Not Acceptable 。)
通常，我已将页面缩减为仅包含演示问题所需的最少内容，但主要问题仍然存在。
没有文档类型，需要:
使用文档类型，严重损坏:
当然还有代码。添加一个文档类型来打破它。
<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;
}
最佳答案
现场演示: http://jsfiddle.net/ZcYwQ/
html { 高度:100%; }左:0； bottom:0;和right:0; bottom:0;在#test1 和#test2 元素上
关于html - 为什么我的页面在标准模式下会严重中断？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4907601/