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）是删除填充顶部并将其更改为高度：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>

）

Answer 2

更改以下CSS：

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

这将使其行为正常，虽然我没有IE8方便测试。我使用 作为链接的内容。

Answer 3

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

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

Internet Explorer中的列表类型问题

3 个答案: