文档类型和部分答案

【问题标题】：Doctype and sections文档类型和部分
【发布时间】：2012-04-28 13:08:41
【问题描述】：

我遇到了这个问题，我不知道为什么会这样......

以下面的html为例，它会按照CSS的指示显示部分的灰色区域。但是，当我在第一行中包含 <!Doctype html> 时，它会崩溃。此外，下面的代码在 IE9 中根本不起作用。为什么？非常感谢。

<html>
<head>

<style type="text/css">
.sec_class{
        width:50%;
        height:15%;
        border:1px black solid;
        padding:0px;
        position:relative;
        background-color:grey;
}
    </style>
</head>

<body>

<section class = 'sec_class'></section>
<section class = 'sec_class'></section>
<section class = 'sec_class'></section>

</body>
</html>

【问题讨论】：

标签： css html layout doctype

【解决方案1】：

为了制作 IE 样式 HTML5 标签（section、nav...），您必须使用 polyfill，因为默认情况下它不能。您可以使用：http://code.google.com/p/html5shiv/

这只是一个 JS 文件，您必须在 HTML 中包含（使用 IE 条件 cmets）：

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

另外你不应该使用单引号：

<section class="sec_class"></section>

当然，如果你在section 元素上设置一个潜在高度，他的父级也必须有一个定义的高度。在你的情况下，15% 的高度没有（body 没有高度）是……没有。

【讨论】：

单引号在 HTML5 中是可以的。他还说他的问题确实出现在 IE9 中。
他说它在 IE9 中根本不起作用（因为高度问题）。在其他浏览器（可能是其他 IE）上，添加 doctype（HTML5 shiv 的东西）时它不起作用。
胡安，非常感谢您的回答。 Bažmegakapa 的回答解决了我的问题，但我肯定会检查 polyfill。

【解决方案2】：

您的sections 基本上没有高度，因为在百分比（height: 15%;）中给出的height 将始终为relative to the parent's height。 body 在您的情况下高度为零，其中 15% 仍然为零。

这应该会有所帮助：

html, body { height: 100%; }

jsFiddle Demo

请务必始终包含文档类型。

【讨论】：

是的，这很有帮助。我不认为省略它会导致问题，非常感谢！
您说得很清楚，但重申一下，问题不是因为positon 设置为相对，而是因为高度设置为百分比。将高度设置为 15px 也会扩大部分（对于任何块元素都是如此）。此外，单独设置 html 元素或 body 元素并不能解决问题（至少在 chrome 中没有）。两者都必须设置（这让我很惊讶）。你可以（如果你愿意的话）用较新的:root 替换html，但body 仍然需要一个高度。