Doctype和sections
我遇到了这种情况，我不确定为什么会发生这种情况……
以下面的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>回答 2
Stack Overflow用户
发布于 2012-04-17 15:39:14
您的section基本上没有高度，因为以百分比(height: 15%;)表示的height将始终为relative to the parent's height。在您的情况下，body的高度为零，其中的15%仍然是零。
这应该会有帮助：
html, body { height: 100%; }jsFiddle Demo
请确保始终包含doctype。
Stack Overflow用户
发布于 2012-04-17 15:39:36
为了制作IE样式的HTML5标签(section，nav...)您必须使用polyfill，因为默认情况下它不能。您可以使用：http://code.google.com/p/html5shiv/
它只是一个JS文件，您必须将其包含在HTML中(使用IE条件注释)：
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->此外，您不应该使用单引号：
<section class="sec_class"></section>当然，如果你在你的section元素上设置一个比例的高度，他的父级也必须有一个定义的高度。在您的例子中，15%的高度为空(body没有高度)就是…没什么。
https://stackoverflow.com/questions/10187081
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号