IE为什么在内容下方而不是上方显示灰色框? [英] Why does IE show the gray boxes below the content, instead of above?
本文介绍了IE为什么在内容下方而不是上方显示灰色框?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
http://www.webdevout.net/test?013&raw
在IE6/7中缩小窗口以查看我在说什么.
Shrink the window in IE6 / 7 to see what I'm talking about.
我去除了应用程序的所有关键部分(必须这样做)，但是基本上那些灰色框应该是下拉框.在现代浏览器中，它可以正常工作...但是在IE6/7中，页面内容使它(以及某些导航链接)黯然失色....有什么想法吗?我可以提供所需的更多信息，请告诉我.
I stripped out all of the critical parts of my application (had to), but basically those gray boxes are supposed to be drop down boxes. In modern browsers, it works fine... but in IE6 / 7, the page content overshadows it (as well as some of the navigational links ).... any ideas? I can give anymore information needed, just let me know.
(上面链接中的页面和代码@，也为了方便起见而在此处张贴)
(page & code @ above link, and also posted down here for ease)
<!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>
推荐答案
It looks like this has to do with the Internet Explorer Z-Index Bug. That article describes how to get around it
这篇关于IE为什么在内容下方而不是上方显示灰色框?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
