爲什麼在IE7,6上邊框上面的框？

Question

http://xanlz.com/test/

爲什麼在IE7,6下，包含文本"code" "book"的文本框在邊界上方？沒有加入到一起。紅色部分的圖像

中，但確定下firefox.and如何卸下底部line.when上的文本（代碼或書），默認狀態下，用文字code的懸停Mouser的。

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; 
} 

使用jQuery一類rankactive添加到李文本。當鼠標上。

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：hover

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