为什么我的页面在标准模式下会严重损坏？

发布于 2024-10-16 07:05:27 字数 1701 浏览 4 评论 0原文

我的页面对于文档类型来说非常完美，但在应用文档类型时会严重损坏。（更具体地说，它会破坏任何 HTML4 文档类型。HTML3 文档类型可以正常工作，但这显然是不可接受的。）

通常，我已将页面缩减为仅包含演示问题所需的最少内容，但主要问题仍然存在。

没有文档类型，需要： desired

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

原文

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

With doctype, horribly broken:
enter image description here

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

分享到QQ

分享到微博