2

我遇到了这个，我不确定它为什么会发生......

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

2 回答 2

3

你section的 s 基本上没有高度，因为height百分比 ( height: 15%;) 中给出的总是相对于父母的高度。body在您的情况下高度为零，其中 15% 仍然为零。

这应该有助于：

html, body { height: 100%; }​

jsFiddle 演示

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

于 2012-04-17T07:39:13.793 回答
1

为了使 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没有高度）是……没有。

于 2012-04-17T07:39:36.107 回答