Html 页面使用 doctype 变得很奇怪答案

【问题标题】：Html page getting weird with doctypeHtml 页面使用 doctype 变得很奇怪
【发布时间】：2013-03-21 09:27:13
【问题描述】：

我写了一个 html 页面，在一个单独的文件中有一些 css，它运行良好。然后我意识到我应该在我的 html 中添加一个 doctype 声明。我这样做了，我的页面完全搞砸了！我尝试了所有类型的声明，但结果都一样！！！

这是我的 html（目前仅适用于 Chrome，并且没有 doctype）：

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>Luca Rood - Home</title>
    </head>
    <body background="images\background.jpg">
        <div id="header">
            <div id="header-back"></div>
            <div id="top-spacing"></div>
            <div id="content">
                <a href="index.html" title="Luca Rood - Home">
                    <img id="image" src="images\logo.png" alt="Luca Rood">
                </a>
            </div>
        </div>
    </body>
</html>

这是我的 CSS：

body {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    margin: 0px 0px 0px 0px;
    }

#header {
    position: relative;
    height: 15%;
    }

#header-back {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000000;
    opacity: 0.3;
    z-index:1;
    }

#top-spacing {
    height: 20%;
    width: 100%;
    }

#content {
    position: relative;
    width: 80%;
    height: 60%;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    z-index:2;
    }

#image {
    height: 100%;
    }

请帮忙。

提前致谢，

卢卡

【问题讨论】：

它是怎么“搞砸”的？
你“添加”了什么doctype？你为什么不提交它而不是 CSS？
如果您选择使用文档类型（您应该这样做），您将不得不使用遵循此文档类型的浏览器。使用 doctype，您可以告诉浏览器以某种方式运行。从理论上讲，所有浏览器的行为都应该相同，所以这或多或少是您应该选择文档类型的原因。因此，您必须决定要使用哪种文档类型，然后更改您的 css。如果您不选择 doctype，浏览器会以“怪癖”模式呈现页面，并且您不希望这种情况发生（即使此时您的页面看起来最好）。
我使用的是 4.01 过渡版，但与许多其他人一起测试过。
不需要一堆文档类型。使用 HTML5 文档类型：<!DOCTYPE html>.

标签： html doctype

【解决方案1】：

您遇到了经典的百分比高度问题。要修复它，您必须将 height:100% 添加到 body 样式并在具有 height:100% 的 html 元素上添加样式：

<style>
    body{
        /*...*/
        height:100%;
    }
    html{
        height:100%;
    }
</style>

希望它有效！

【讨论】：

【解决方案2】：

试试上面的标签

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

【讨论】：

这正是问题所在。提问者明确表示，他/她尝试了许多 doctype，但都不起作用。