Question

我正在开发一个侧边栏嵌套列表的网站。亲李有儿童李结构。在第一个显示屏上显示4 li（列表项），上面的4个项应隐藏，并带有“全部显示”选项的链接。

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中包含在li中。并且包含在l中的是渲染出破坏布局的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

由于

嵌套列表中的IE 7 bug div打破了布局

1 个答案: