なぜIE7の下に、上記のボーダーボックスがありますか？

Question

http://xanlz.com/test/

なぜIE7,6では、テキストを含むボックスが境界上にあるのですか？一緒に参加しない。赤の画像

で一部が、[OK]をテキストcodeとテキスト（コードまたはブック）やデフォルト状態の下でMouser初のホバーline.when下を削除する方法firefox.and下。

htmlコード：

<div class="week-down rounded-corner"> 
<h2>week test</h2> 
    <div class="ranktitle"> 
    <ul> 
     <li class="tab1 rankactive">code</li> 
     <li class="tab2">book</li> 
     <div class="clear"></div> 
    </ul> 
    </div> 
    <div class="weekrank"> 
<div class="code-down tab1" style="display: block;"> 
<ul class="item-list itemlist"> 
<li><a href="#" >asp</a></li> 
<li><a href="#" >phpp</a></li> 
<li><a href="#" >java</a></li> 
<li><a href="#" >asp</a></li> 
<li><a href="#" >phpp</a></li> 
<li><a href="#" >java</a></li> 
<li><a href="#" >phpp</a></li> 
<li><a href="#" >java</a></li> 

</ul> 
</div> 

<div class="book-down tab2" style="display: none;"> 
    <ul class="item-list itemlist"> 
<li><a href="#" >test</a></li> 
<li><a href="#" >phpp</a></li> 
<li><a href="#" >test</a></li> 
<li><a href="#" >asp</a></li> 
<li><a href="#" >phpp</a></li> 
<li><a href="#" >java</a></li> 
<li><a href="#" >phpp</a></li> 
<li><a href="#" >java</a></li> 

</ul> 
</div> 
</div> 

</div> 

メインのスタイル：

 .ranktitle { 
     margin-top: 5px; 
    } 

    .code-down ul.item-list, .book-down ul.item-list { 
     border-top: 1px solid #D5D5D5; 
     padding-top: 8px; 
    } 

    #tabs-content ul, ul.item-list { 
     padding: 3px 0 0 7px; 
    } 
.ranktitlewhole ul li.rankactive, .ranktitle ul li.rankactive { 
    background-color: #FFFFFF; 
} 

私は、Liテキストにクラスrankactiveを追加するためにjqueryのを使用します。マウスがオンのとき。

Answer 1

あなたは<ul>の中に<div class="clear"></div>を持っています。これは無効です。それを削除し、<ul>overflow: hidden;のプロパティに追加します。

IE6の場合zoom: 1;プロパティを追加する必要があります。これがなければoverflow: hidden;は動作しません。

そして、質問の第二部のために、この試してください：それはシンプルにしてみましょう

li:hover { 
    position: relative; 
    top: 1px; 
    padding-bottom: 1px; 
} 

UPDATE

を。 overflow: hidden;とzoom: 1;を削除し、<ul>固定高さ、たとえば15pxに設定します。 Li：ホバー

li:hover { 
    position: relative; 
    top: 1px; 
}