标签的内容在IE7下显示异常

Question

链接：http://xanlz.com/test/one.html

html：

<div class="codepg-tabtp rounded-corner">

  <div class="cdpgtabtp">
     <ul>
        <li class="tab1 cdpgactive"><a href="javascript:void(0);" style="background: none repeat scroll 0% 0% transparent;"><span>PHP</span></a></li>
        <li class="tab2"><a href="javascript:void(0);"><span>PHP</span></a></li> 
        <li class="tab3"><a href="javascript:void(0);"><span>PHP</span></a></li> 
         <li class="tab4"><a href="javascript:void(0);"><span>PHP</span></a></li> 
        <li class="tab5"><a href="javascript:void(0);"><span>jasp</span></a></li> 
        <li class="tab6"><a href="javascript:void(0);"><span>javascript</span></a></li> 
     </ul>
  </div>

   <div class="codepg-tabtpct">
   <div class="tab1" style="display: block;">
 <ul class="item-list itemlist">
 <li class="odd"><a  target="_blank" href="#">example one two </a> <span>07-27</span></li>
<li class="even"><a  target="_blank" href="#">example one two </a> <span>07-27</span></li>
<li class="odd"><a  target="_blank" href="#">example one two </a> <span>07-27</span></li>
<li class="even"><a  target="_blank" href="#">example one two </a> <span>07-27</span></li>
<li class="odd"><a  target="_blank" href="#">example one two </a> <span>07-27</span></li>
<li class="even"><a  target="_blank" href="#">example one two </a> <span>07-27</span></li>
<li class="odd"><a  target="_blank" href="#">example one two </a> <span>07-27</span></li>
<li class="even"><a  target="_blank" href="#">example one two </a> <span>07-27</span></li>
<li class="odd"><a  target="_blank" href="#">example one two </a> <span>07-27</span></li>
<li class="even"><a  target="_blank" href="#">example one two </a> <span>07-27</span></li>
<li class="odd"><a  target="_blank" href="#">example one two </a> <span>07-27</span></li>
<li class="even"><a  target="_blank" href="#">example one two </a> <span>07-27</span></li>
<li class="odd"><a  target="_blank" href="#">example one two </a> <span>07-27</span></li>
<li class="even"><a  target="_blank" href="#">example one two </a> <span>07-27</span></li>

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

 </div>

</div>

css：

.codepg-tabtp{
    border: 1px solid #94D5ED;
    height: 256px;
    margin-top: 10px;
    padding: 1px;
    width: 766px;
}
#tabs-content ul, ul.item-list, .hot-version .list-content {
    padding: 3px 0 0 7px;
}

标签的内容在IE7下显示异常。但在Firefox下正常。如何让它在IE7下显示正常。谢谢

li在IE7下显示异常

Answer 1

在Chrome，Firefox和IE7中，我看起来一样，只是鼠标悬停时标签略有变化。

这可能来自.cdpgactive类的额外填充。将其归零固定了这种转变。不确定这是否是你提到的问题。

.cdpgtabtp li.cdpgactive a, .codepg-tabdw li.cdpgactive a {
    background: url("images/cdpgtab_l.gif") no-repeat scroll 0 0 transparent;
    height: 29px;
    padding: 0px;
}

编辑：我认为这不是主要问题 - IE7中的标签中的项目也有重叠。所以，这还不是一个好的解决方案。

更新： 在包含ul上设置高度并在li.even上添加更多边距会为我修复它：

ul.item-list {
  height:400px;
  padding-bottom:0;
  padding-left:7px;
  padding-right:0;
  padding-top:3px;
}

.codepg-tabtpct ul.item-list li.even {
  float:right;
  margin-right:44px;
}

<强>更新

好抓。设置li.odd的宽度应该可以解决对齐问题：

.codepg-tabtpct ul.item-list li.odd {
  float:left;
  width:200px;
}

截图： http://img94.imageshack.us/img94/6999/cssie72.png