Html Internet Explorer中的列表类型问题

这就是它在Firefox和Internet Explorer中的外观。它在Firefox中看起来很完美，但在IE中却一团糟

我如何解决这个问题

谢谢大家。

一个可能的修复方法（在IE8和Firefox 3中对我有效）是移除填充顶部并将其更改为高度：10px，然后使文本颜色与背景颜色相同，例如：

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

（编辑：对于我使用的HTML：

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

---

)更改以下CSS：

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

---

这将使它的行为正确，虽然我没有IE8手边测试。我使用了

作为链接的内容。

使用您的CSS和Alistair Knock的HTML，我能够通过将IE（IE8和IE8处于IE7模式）放到中来复制问题。它在标准模式下呈现得很好，这让我认为您可以通过在HTML中包含有效的

---

我使用IE在怪癖和标准模式（以及IE8和IE7模式）之间切换。它很方便

你也可以展示你的html代码吗？给出你的html样本会使测试更容易。哪个IE版本也可以helpful@bboran，虽然您还不能投票支持答案，但您可以通过单击勾选图标将答案标记为已接受。这将确保它不会出现在“未回答问题”列表中。非常感谢。这在IE7中对我有效，但在ie8中没有任何改变。在ie8中使用HTML和组合CSS，在兼容/不兼容模式下对我有效。你确定旧的CSS没有被缓存吗？（Ctrl-F5）尝试只使用上面发布的HTML和上面发布的组合CSS创建一个测试页面，看看是否有效。可能是页面上的其他内容影响了布局。哦，非常感谢。我使用了一个错误的ie条件代码，该代码在IE8=）上不起作用。现在，该代码在IE7和IE8中都非常有效。非常感谢。我是新来的，所以我不能投票对不起。你可能需要添加文字装饰：无；对于a，也可以隐藏下划线。

.work .nav li {
    float: left;
    margin-right: 5px;
    height: 10px;
    line-height: 0px;
}