极客观点
项目管理
HarmonyOS
直接上代码，在jsfiddle下运行正常，但在IE运行不正常
<div class="menu">
<div class="menu-bar"></div>
<div class="menu-body">
<h3>Programs</h3>
<h3>Documents</h3>
<h3>Run</h3>
</div>
</div>
.menu {
border: 1px solid black;
position: relative;
width: 200px
}
.menu-bar {
background-color: gray;
position: absolute;
left: 0;
top: 0;
width: 30px;
height: 100%;
}
.menu-body h3 {
border: 1px solid blue;
line-height: 30px;
vertical-align: middle;
margin: 0 0 0 30px;
}
IE8下没有按照父元素的100%高度显示
==========
有人提示要设置html，body高度为100%，但这不是问题关键。
我的问题是父元素的高度不固定，看我写的jsfiddle的例子，父元素.menu没有指定height，但在chorme、firefox下，内层元素.menu-bar高度设置为100%后，可以和父元素的高度保持一致，但在IE8下就不行。
问题已经找到，根本原因是html文件没有doctype声明，导致IE使用了Quirks模式显示网页。
增加下面的doctype声明后，即使没有设置html,body{height:100%}，显示结果也是正常的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">