嵌套列表中的IE 7 bug div破壞版式

Question

我正在開發一個帶有側欄嵌套列表的網站。李氏有兒童李結構。在第一次顯示時，會顯示4個li（列表項目），並且上面的4個項目應該隱藏並顯示「Show All」選項的鏈接。

的html代碼：

<div id="sideMenuBox"> 
<div class="header"> 
    <h2 class="cufon">KATEGORİLER</h2> 
    <a class="moreLink" href="#" title="">Tümü</a> 
</div> 
<div class="body"> <!-- menubox body --> 
    <ul id="sideMenu"> 
     <li> 
      <span><img src="images/icon-1.png" alt="icon" width="32" height="19" /></span> 
      <a href="#" title="">Alışveriş Merkezleri</a> 
      <ul> 
       <li><a href="#" title="">Online Alışveriş Siteleri</a></li> 
       <li><a href="#" title="">Kuyumcular</a></li> 
       <li><a href="#" title="">Hediyelik Eşya</a></li> 
       <li><a href="#" title="">Çiçek Sektörü</a></li> 
       <div class="sbSubMenu" style="border:black 1px solid"> 
        <li><a href="#" title="">Kuyumcular</a></li> 
        <li><a href="#" title="">Kuyumcular</a></li> 
        <li><a href="#" title="">Kuyumcular</a></li> 
        <li><a href="#" title="">Kuyumcular</a></li> 
       </div> <!--// sidebar submenu --> 
       <li><a class="showAll" href="javascript:" title="" onclick="javascript:showMenu(this);">show all</a></li> 
      </ul> 
      <br class="clearFix" /> 
     </li> 
    </ul> 
</div> <!-- // menubox body --> 
<div class="bottom"></div> 
</div> <!-- // sideMenuBox --> 

和CSS代碼：

#sideMenu { 
width:200px; height:auto; 
margin:10px auto; 
} 
#sideMenu li{ 
list-style-type:none; 
min-height:25px; 
line-height:18px; 
height:auto; 
border:blue 1px solid; 
} 
#sideMenu hr { width:100%; height:1px; color:#e69000; background:#e69000; margin:10px auto 5px; border:0;} 
#sideMenu li span { width:40px; float:left;} 
#sideMenu li a{ 
color:#003a69; 
text-decoration:none; 
font-size:16px; 
font-weight:bold; 
margin:0; padding:0; 
} 
#sideMenu li li { 
margin-left:50px; 
display:inline-block; 
line-height:20px; 
border:red 1px solid; 
} 
#sideMenu li li a { font-size:13px; height:1px;} 
#sideMenu li li a.showAll, 
#sideMenu li li a.showLess{ 
color:006aa6; 
text-decoration:underline; 
font-size:12px; 
font-weight:normal; 
margin:10px 0; 
padding-right:15px; 
background:url(../images/arrow-down-blue.png) right center no-repeat; 
} 
#sideMenu li li a.showLess{ background:url(../images/arrow-up-blue.png) right center no-repeat;} 
#sideMenu .sbSubMenu { 
width:100%; height:auto; 
} 

這些代碼在Firefox，Chrome和IE8工作正常，但在IE7中包含裏。並且包含在裏面的是渲染出破壞佈局的div。如果我從代碼中刪除，那麼它的工作正常，但爲了滿足項目的要求，我必須在四個後隱藏列表項，這就是爲什麼我已經將列表項包含在div中以默認隱藏。

我已經設置了一個在線演示頁面來解決這個問題，並得到專家的建議。你可以看到這個頁面現場演示頁面：http://tinyurl.com/7pqo5ob

注：我已經添加了一些邊界，以瞭解如何列表項和div在IE中呈現。它在其他瀏覽器中工作正常，但在IE7中效果不佳。我嘗試了很多選擇，但徒勞無功。

請指教。

在此先感謝。

Answer 1

非常感謝您的關注。我嘗試了很多技巧，終於得到了它。實際的問題是嵌套的無序列表和列表項結構。在「LI」的內部結構中，我放置了一個默認隱藏的「DIV」標籤。這是IE 7開始打破布局的一點。如果我刪除了「DIV」標籤，那麼它沒問題，但是在項目要求中，「DIV」應該用於隱藏「LI」。

經過許多小時的挫折之後，我試圖將「DIV」更改爲「LI」，並在IE7和其他瀏覽器中正常工作。

最終代碼：

<ul id="sideMenu"> 
    <li> 
     <span><img src="images/icon-1.png" alt="icon" width="32" height="19" /></span> 
     <a href="#" title="">Alışveriş Merkezleri</a> 
     <ul> 
      <li><a href="#" title="">Online Alışveriş Siteleri</a></li> 
      <li><a href="#" title="">Kuyumcular</a></li> 
      <li><a href="#" title="">Hediyelik Eşya</a></li> 
      <li><a href="#" title="">Çiçek Sektörü</a></li> 
      <li class="sbSubMenu"> <!-- hidden list items --> 
       <ul> 
        <li class="innerList"><a href="#" title="">Kuyumcular</a></li> 
        <li class="innerList"><a href="#" title="">Kuyumcular</a></li> 
        <li class="innerList"><a href="#" title="">Kuyumcular</a></li> 
        <li class="innerList"><a href="#" title="">Kuyumcular</a></li> 
       </ul> 
      </li> <!-- // sidebar submenu --> 
      <li class="Link"><a class="showAll" href="javascript:" title="" onclick="javascript:showMenu(this);">show all</a></li> 
     </ul> 
    </li> <!-- // main List Item ---> 
    </ul> 

，您可以查看此網頁，做工精細用IE7。 鏈接：http://www.designforce.us/demo/kktc/index.html

感謝