Internet Explorer中的列表类型问题

.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中它却搞乱了。Internet Explorer中的列表类型问题

我该如何解决这个问题？

谢谢大家。

来源

2009-06-16 bboran

你可以显示你的html代码吗？ – Alsciende 2009-06-16 08:34:47

给你的示例HTML会使测试更容易。 – 2009-06-16 08:35:09

哪个IE版本也会有帮助 – jitter 2009-06-16 08:39:30

一个可能的修复（在IE8和Firefox 3为我的作品）是去除填充顶部并将其更改为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>

）

来源

2009-06-16 08:41:50

改变下列片CSS的：

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

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

来源

2009-06-16 08:50:52 CtlAltDel

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

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

来源

2009-06-16 09:59:12

Internet Explorer中的列表类型问题

回答

相关问题