http://www.webdevout.net/test?013&raw
在 IE6/7 中缩小窗口，看看我在说什么。
我删除了应用程序的所有关键部分(必须这样做)，但基本上那些灰色框应该是下拉框。在现代浏览器中，它工作正常......但在 IE6/7 中，页面内容掩盖了它(以及一些导航链接)......有什么想法吗？我可以提供更多需要的信息，请告诉我。
(页面和代码@上面的链接，为了方便也张贴在这里)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test</title>
<style type="text/css">
/* RESET ------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0; }
body {
font-size: 62.5%; }
/* END OF RESET ------------------------------ */
/* ======= GENERAL SITE STYLES ==================== */
a img {
border: none; }
h1 {
font-weight: bold;
font-size: 19px;
color: #333;
margin-bottom: 20px; }
h2 {
margin: 10px 0;
font: bold 11px Verdana;
color: #333; }
html, body {
height: 100%; }
body {
font-family: Verdana;
border: 0;
width: 100%;
position: relative; }
/*Opera Fix*/
body:before {
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px; }
form label {
display: block; }
.page_defaults {
height: 100%;
width: 100%;
position: relative; }
#header {
width: 100%;
height: 60px;
padding: 15px 0;
background: #FFFFFF;
position: relative; }
#header_nest {
float: right;
margin-right: 5%; }
#header_nest img {
display: inline-block;
vertical-align: middle; }
body.ie6 #header_nest img, body.ie7 #header_nest img {
display: inline; }
#header_nest p {
font: normal 10px Verdana;
display: inline-block;
vertical-align: middle;
text-align: center;
margin: 0 25px 0 15px; }
body.ie6 #header_nest p, body.ie7 #header_nest p {
display: inline; }
ul#nav {
padding: 0 0 0 20px;
position: relative;
}
ul#nav li {
display: inline-block;
vertical-align: middle;
font: normal 11px Verdana, sans-serif;
list-style-type: none; }
body.ie6 ul#nav li, body.ie7 ul#nav li {
display: inline; }
ul#nav li h2 {
display: inline-block;
vertical-align: middle;
z-index: -1;
margin: 0;
font: normal 11px Verdana, sans-serif; }
body.ie6 ul#nav li h2, body.ie7 ul#nav li h2 {
display: inline; }
ul#nav li h2 a {
display: inline-block;
vertical-align: middle;
z-index: 4;
text-decoration: none;
position: relative;
color: #999;
padding: 20px 10px 20px 40px;
white-space: nowrap; }
body.ie6 ul#nav li h2 a, body.ie7 ul#nav li h2 a {
display: inline; }
ul#nav li.mega {
position: relative; }
ul#nav li.mega div {
position: absolute;
z-index: 5;
padding: 10px;
border-left: 1px solid #999;
border-right: 3px solid #999;
border-bottom: 2px solid #999;
top: 52px;
left: 0;
margin-right: 40px;
background: #CCC;
}
ul#nav li.mega div h3 {
display: inline;
font: bold 13px Verdana, sans-serif; }
ul#nav li.hovering div {
display: block; }
ul#nav img {
position: absolute;
z-index: -1;
top: 50%;
margin-top: -12px;
left: 8px; }
/* --------- Main portion (content, sidebar) ---------- */
#wrap {
min-height: 100%;
position: relative; }
#main {
overflow: auto;
padding-bottom: 150px;
position: relative; }
#content-wrapper {
float: left;
width: 100%; }
#content {
padding: 40px;
overflow: auto;
position: relative; }
#contentwrapper {
float: left;
min-height: 100%;
overflow: hidden;
width: 100%;
position: relative; }
/* NEW STYLES ------------------------- */
body.ie7 #main {
display: table;
height: 100%; }
body.ie6 #main {
float: left; }
body.ie6 #wrap {
display: table;
height: 100%; }
.dataset {
position: relative; }
.fg-toolbar {
clear: both; }
/* --------- Bottom portion (footer) -------------------- */
#footer {
position: relative;
margin-top: -150px;
height: 150px;
clear: both;
background: #333; }
</style>
</head>
<!--[if lte IE 6]>
<body class="ie6">
<![endif]-->
<!--[if lte IE 7]>
<body class="ie7">
<![endif]-->
<!--[if gte IE 8]><!-->
<body>
<!--<![endif]-->
<div id="" class="page_defaults grp_dash">
<div id="wrap">
<div id="header">
<div id="header_nest">
<p>Hello, <strong>User</strong><br />
<a href="/help/contact/">Get Help</a> |
<a href="/logout/">Logout</a>
</p>
</div>
</div>
<ul id="nav">
<li class="mega">
<h2><a href="/">Test</h2></li>
<li class="mega" style="z-index: 40;">
<h2><a href="#">Test</a></h2>
<div>
<h3>Test</h3>
<p>
<a href="">Test</a>,
<a href="">Test</a>,
<a href="">Test</a>,
<a href="">Test</a>
</p>
</div>
</li>
<li class="mega">
<h2><a href="#">Test</a></h2>
<div>
<h3>Test</h3>
<p>
<a href="#">Test</a>,
<a href="#">Test</a>,
<a href="#">Test</a>,
<a href="#">Test</a>,
<a href="#">Test</a>,
<a href="#">Test</a>
</p>
</div>
</li>
<li>
<h2><a href="#">Test</a></h2>
</li>
<li class="mega">
<h2><a href="#">Test</a></h2>
<div>
<h3>Test</h3>
<p>
<a href="#">Test</a>,
<a href="#">Test</a>
</p>
<h3>Test</h3>
<p>
<a href="#">Test</a>
</p>
<p>
<a href="#">Test</a>
<p>
</div>
</li>
</ul>
<div id="main">
<div id="contentwrapper">
<div id="content">
<h1>Page Title</h1>
<h2>Subtitle</h2>
</div>
</div>
</div>
</div>
<div id="footer">
<ul>
</ul>
</div>
</div>
</body>
</html>
最佳答案
看起来这与 Internet Explorer Z-Index Bug 有关.那篇文章描述了如何绕过它
关于css - 为什么 IE 显示灰色框在内容下方，而不是上方？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3366670/