Question

我遇到了这个，我不确定为什么会这样......

以下面的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>

Answer 1

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

这应该有所帮助：

html, body { height: 100%; }

jsFiddle Demo

请务必始终包含doctype。

Answer 2

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

这只是一个必须包含在HTML上的JS文件（使用IE条件注释）：

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

此外，您不应该使用单引号：

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

此外，当然，如果您在section元素上设置了一个高度，他的父母也必须具有一个已定义的高度。在你的情况下，15％的高度（body没有高度）是......没有。

Doctype和部分

2 个答案: