html - Internet Explorer 中的列表类型问题

Question

.work .nav {
    list-style: none;
    margin: 0 0 5px 5px;
    padding: 0;
    position:absolute;
    top:248px;
    left:15px;
    z-index: 2;
}
.work .nav:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.work .nav li {
    float: left;
    margin-right: 5px;
}
.work .nav li a {
    float: left;
    display: block;
    padding-top: 10px;
    width: 10px;
    height: 0;
    border: 1px solid #ccc;
    overflow: hidden;
}
.work .nav li a:hover {
    background: #bbb;
}
.work .nav li a.on {
    background: #ccc;
}

This是它在 Firefox 和 Internet Explorer 中的样子。它在 Firefox 中看起来很完美，但在 IE 中却一团糟。

我该如何解决这个问题？

谢谢大家

Answer 1

一个可能的解决方法(在 IE8 和 Firefox 3 中对我有效)是删除 padding-top 并将其更改为 height:10px，然后使文本颜色与背景颜色相同，例如:

.work .nav li a {
    float: left;
    display: block;
    width: 10px;
    height: 10px;
    border: 1px solid #ccc;
    color:#fff;
    overflow: hidden;
}

.work .nav li a:hover {
    background: #bbb;
    color:#bbb;
}
.work .nav li a.on {
    background: #ccc;
    color:#ccc;
}

(编辑:对于我使用的 HTML:

<div class="work">
<ul class="nav">
 <li><a href="">1</a></li>
 <li><a href="">2</a></li>
 <li><a href="">3</a></li>
</ul>
</div>

)