IE 7 ошибка div в вложенном списке разрывает макет

Question

Я разрабатываю веб-сайт с вложенными списками боковых панелей. Родитель li имеет структуру детей li. На первом дисплее отображается 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 включен в литий. и lis включены в рендеринг из div, который нарушает макет. Если я удалю из кодов, тогда его работа отлично, но для удовлетворения требований проекта я должен скрыть элементы списка после четырех, поэтому я включил элементы списка в div, которые будут скрыты по умолчанию.

У меня установлена ​​онлайн-демонстрационная страница, чтобы решить эту проблему и получить рекомендации экспертов. Вы можете увидеть эту страницу в режиме реального времени: http://tinyurl.com/7pqo5ob

Примечание: я добавил некоторые границы, чтобы понять, как элементы списка и divs отображаются в 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

Благодаря