为什么在IE7,6下边框上面？

Question

http://xanlz.com/test/

为什么在IE7,6下，包含文字"code" "book"的框位于边框上方？不加入。图像中的红色部分

但在firefox下可以正常。以及如何移除底线。当鼠标悬停在文本（代码或书籍）上并且在默认状态下使用文本code。

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在li文本中添加一个类rankactive。当鼠标开启时。

Answer 1

<div class="clear"></div>内有<ul>。这是无效的。删除它并添加到<ul> overflow: hidden;属性。

对于IE6 zoom: 1;属性必须添加。没有这个overflow: hidden;不起作用。

对于问题的第二部分，试试这个：

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

更新

让我们简单一点。 移除overflow: hidden;和zoom: 1;并设置为<ul>固定高度，例如15px。 对于李：悬停

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