使用drop drop做頂級導航：有IE bug

所以我試圖做一個頂級的導航，它在普通的瀏覽器（它有扭曲，但我可以鐵了）的作品非常好。使用drop drop做頂級導航：有IE bug

但無論出於何種原因，在IE6/7中，當瀏覽器視口縮小時，鏈接將放在下拉菜單中。它在我認爲是大多數其他瀏覽器中起作用，並且我不知道如何修復它。我嘗試過z排序，我嘗試了很多很多東西。有什麼建議？

<!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>

來源

2010-07-01 xckpd7

我想你也應該發佈CSS。 – Mike 2010-07-01 18:09:59

ahhh我是個白癡 – xckpd7 2010-07-01 18:55:27

z-index and IE < 8：幾個小時的樂趣！

以下是有關的z-index一般和IE < 8蟲子特別是兩大資源：

Effect of z-index value to positioned elements由亞歷山大Vacić（它有趣的大約5頁或7。）
Find out how elements stack and start using low z-index values（ TJKDesign）及其方便的「z-index tool」

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: 100; div

來源

2010-07-01 21:41:31 FelipeAls

使用drop drop做頂級導航：有IE bug

回答

相關問題