0
サイドバーのネストされたリストを持つWebサイトを開発しています。親の李は子の構造を持っています。最初の表示では4 li（リスト項目）が表示され、4項目以上は「すべて表示」オプションへのリンクで非表示にする必要があります。IE 7ネストされたリスト内のバグダグは分割レイアウトです
の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、クロム、およびIE8で正常に動作しているが、IE7中のLiに含まれています。そこに含まれるlisは、レイアウトを破っているdivからレンダリングされます。私はコードから削除して、そのうまく動作しますが、プロジェクトの要件を満たすためには、リスト項目を4つの理由で非表示にする必要があります。なぜなら、divのリスト項目をデフォルトで非表示にする理由です。
私はこの問題を解決し、専門家に助言を得るためにオンラインデモページをセットアップしました。このページのライブデモページを見ることができます：http://tinyurl.com/7pqo5ob
注：リスト項目とdivがIEでレンダリングされる方法を理解するために、いくつかの枠線を追加しました。他のブラウザではうまく動作していますが、IE7ではうまく動作しません。私は無駄に多くのオプションを試しました。
お知らせください。
ありがとうございます。
あなたは標準モードにIEを切り替えるために使用していますか？ http://www.quirksmode.org/css/quirksmode.html –
@MichaelSladeあなたの懸念に感謝します。私は異なったとのページをテストしたが、didnt仕事。最後に私はそれを得てバグを修正しました。 –