所以我试图做一个顶级导航，它在常规浏览器中运行得非常好（它有扭结但我可以解决的问题）。
但无论出于何种原因，在IE6 / 7中，当浏览器视口缩小时，链接将被放置在下拉列表中。它在我认为的大多数其他浏览器中起作用，而且我不知道如何解决它。我尝试过z-ordering，我尝试过很多东西。有什么建议吗？
<!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">
</script>
<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 ------------------------------ */
a img {
border: none; }
#header {
width: 100%;
height: 90px;
background: #FFFFFF; }
ul#nav {
width: 100%;
position: relative;
background: url(../images/partners/renew_b2b/silver_bar.png) repeat; }
ul#nav li {
display: inline-block;
vertical-align: middle;
font: normal 11px Verdana;
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;
font: normal 11px Verdana; }
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;
background: green;
height: 1%;
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: 100;
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: #f09; }
ul#nav li.mega div h3 {
display: inline;
font: bold 13px Verdana; }
ul#nav li.hovering div {
display: block; }
ul#nav img {
position: absolute;
z-index: -1;
top: 50%;
margin-top: -12px;
left: 8px; }
#main {
width: 100%;
overflow: hidden;
background: url(../images/partners/renew_b2b/sidebar_background.png) repeat-y top right; }
#content {
float: left;
display: inline;
height: 300px; }
#sidebar {
width: 200px;
color: black;
float: right;
display: inline;
height: 300px; }
#footer {
width: 100%;
clear: both;
background: #333; }
#footer ul {
display: inline-block;
margin: 30px; }
body.ie6 #footer ul, body.ie7 #footer ul {
display: inline; }
#footer ul li {
display: inline-block;
list-style-type: none;
margin: 0 9px; }
body.ie6 #footer ul li, body.ie7 #footer ul li {
display: inline; }
#footer ul li a {
color: #FFF;
text-decoration: none;
font: normal 1.4em Verdana; }
</style>
</head>
<!--[if lte IE 6]><body class="ie6 ie7"><![endif]-->
<!--[if lte IE 7]><body class="ie7"><![endif]-->
<!--[if gte IE 8]><!--><body><!--<![endif]-->
<div id="header"></div>
<ul id="nav">
<li>
<h2><a href="fixme">Link 1</a></h2>
</li><li class="mega">
<h2><a href="fixme">Link 2</a></h2>
<div>
<h3>Dropdown:</h3>
<p>
<a href="fixme">Filter 1</a>,
<a href="fixme">Filter 2</a>,
<a href="fixme">Filter 3</a>,
<a href="fixme">Filter 4</a>,
</p>
</div>
</li><li class="mega">
<h2><a href="fixme">Link 3</a></h2>
<div>
<h3>Dropdown:</h3>
<p>
<a href="fixme">Filter 1</a>,
<a href="fixme">Filter 2</a>,
<a href="fixme">Filter 3</a>,
<a href="fixme">Filter 4</a>,
<a href="fixme">Filter 5</a>,
<a href="fixme">Filter 6</a>
</p>
</div>
</li><li>
<h2><a href="fixme">Link 4</a></h2>
</li><li class="mega">
<h2><a href="fixme">Link 5</a></h2>
<div>
<h3>Filters</h3>
<p>
<a href="fixme">Filter 1</a>,
<a href="fixme">Filter 2</a>,
<a href="fixme">Filter 3</a>
</p>
<h3>Filters</h3>
<p>
<a href="fixme">Filter 1</a>,
<a href="fixme">Filter 2</a>,
<a href="fixme">Filter 3</a>
</p>
</div>
</li>
</ul>
<div id="main">
<div id="content">
</div>
<div id="sidebar">stuff here <br /> stuff here <br /> stuff herestuff here <br /> stuff here <br /> stuff herestuff here <br /> stuff here <br /> stuff herestuff here <br /> stuff here <br /> stuff herestuff here <br /> stuff here <br /> stuff herestuff here <br /> stuff here <br /> stuff here</div>
</div>
<div id="footer">
<ul>
<li><a href="fixme">Foter Link 2</a></li>
<li><a href="fixme">Footer Link 1</a></li>
</ul>
</div>
</body>
</html>
答案 0 :(得分：1)
z-index和IE＆lt; 8：小时的乐趣！
以下是关于z-index的两个重要资源，特别是IE＆lt; 8 bug：
Mozilla开发中心：Understanding CSS z-index显然没有提到IE错误。
这是一个更正后的代码（标有***，我修改了li上的样式属性
<!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">
</script>
<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 ------------------------------ */
a img {
border: none; }
#header {
width: 100%;
height: 90px;
background: #FFFFFF; }
ul#nav {
width: 100%;
position: relative;
background: url(../images/partners/renew_b2b/silver_bar.png) repeat; }
ul#nav li {
display: inline-block;
vertical-align: middle;
font: normal 11px Verdana;
list-style-type: none;
position: relative; /* *** */ }
body.ie6 ul#nav li, body.ie7 ul#nav li {
display: inline; }
ul#nav li h2 {
display: inline-block;
vertical-align: middle;
font: normal 11px Verdana; }
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;
background: green;
height: 1%;
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: 100;
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: #f09; }
ul#nav li.mega div h3 {
display: inline;
font: bold 13px Verdana; }
ul#nav li.hovering div {
display: block; }
ul#nav img {
position: absolute;
z-index: -1;
top: 50%;
margin-top: -12px;
left: 8px; }
#main {
width: 100%;
overflow: hidden;
background: url(../images/partners/renew_b2b/sidebar_background.png) repeat-y top right; }
#content {
float: left;
display: inline;
height: 300px; }
#sidebar {
width: 200px;
color: black;
float: right;
display: inline;
height: 300px; }
#footer {
width: 100%;
clear: both;
background: #333; }
#footer ul {
display: inline-block;
margin: 30px; }
body.ie6 #footer ul, body.ie7 #footer ul {
display: inline; }
#footer ul li {
display: inline-block;
list-style-type: none;
margin: 0 9px; }
body.ie6 #footer ul li, body.ie7 #footer ul li {
display: inline; }
#footer ul li a {
color: #FFF;
text-decoration: none;
font: normal 1.4em Verdana; }
</style>
</head>
<!--[if lte IE 6]><body class="ie6 ie7"><![endif]-->
<!--[if lte IE 7]><body class="ie7"><![endif]-->
<!--[if gte IE 8]><!--><body><!--<![endif]-->
<div id="header"></div>
<ul id="nav">
<li style="z-index:60;">
<h2><a href="fixme">Link 1</a></h2>
</li><li class="mega" style="z-index:50;">
<h2><a href="fixme">Link 2</a></h2>
<div>
<h3>Dropdown:</h3>
<p>
<a href="fixme">Filter 1</a>,
<a href="fixme">Filter 2</a>,
<a href="fixme">Filter 3</a>,
<a href="fixme">Filter 4</a>,
</p>
</div>
</li><li class="mega" style="z-index:40;">
<h2><a href="fixme">Link 3</a></h2>
<div>
<h3>Dropdown:</h3>
<p>
<a href="fixme">Filter 1</a>,
<a href="fixme">Filter 2</a>,
<a href="fixme">Filter 3</a>,
<a href="fixme">Filter 4</a>,
<a href="fixme">Filter 5</a>,
<a href="fixme">Filter 6</a>
</p>
</div>
</li><li style="z-index:30;">
<h2><a href="fixme">Link 4</a></h2>
</li><li class="mega" style="z-index:20;">
<h2><a href="fixme">Link 5</a></h2>
<div>
<h3>Filters</h3>
<p>
<a href="fixme">Filter 1</a>,
<a href="fixme">Filter 2</a>,
<a href="fixme">Filter 3</a>
</p>
<h3>Filters</h3>
<p>
<a href="fixme">Filter 1</a>,
<a href="fixme">Filter 2</a>,
<a href="fixme">Filter 3</a>
</p>
</div>
</li>
</ul>
<div id="main">
<div id="content">
</div>
<div id="sidebar">stuff here <br /> stuff here <br /> stuff herestuff here <br /> stuff here <br /> stuff herestuff here <br /> stuff here <br /> stuff herestuff here <br /> stuff here <br /> stuff herestuff here <br /> stuff here <br /> stuff herestuff here <br /> stuff here <br /> stuff here</div>
</div>
<div id="footer">
<ul>
<li><a href="fixme">Foter Link 2</a></li>
<li><a href="fixme">Footer Link 1</a></li>
</ul>
</div>
</body>
</html>
简而言之：每个li而不仅仅li.mega的相对定位;每个z-index从高值到低值。你已经有了z-index: 100; div