即使在 IE 中也没有填充

Question

如果你将下面的代码粘贴到test.html中并使用firefox浏览，就可以了。但是如果你用IE浏览的话，你会发现右边多了一些空间 <a> 元素。：

<style>
li { 
    display:inline;
    margin:0 90px;
    padding:6px 12px;
    background:#777777 none repeat scroll 0 0;
}



li a {
    color:#FFFFFF;
    text-decoration:none;
    font-weight:bold;
}
</style>


<div id="tabs">
    <div class="nav">
        <ul>
            <li><a href="test">test</a></li>
            <li><a href="test">test</a></li>
            <li><a href="test">test</a></li>
            <li><a href="test">test</a></li>
            <li><a href="test">test</a></li>
        </ul>
    </div>
</div>

编辑:如何让文字在IE中也能显示？

Answer 1

要简单地回答你的问题：把所有li元素在同一行或浮动它们

。

Answer 2

我确实查看了您的来源并亲自尝试过。

在 Firefox 3.0.11 和 Internet Explorer 8 中，我显示了几乎相同的页面。

我可以说的一件事是，页面最初看起来不同，因为我的浏览器宽度不同，但不是您遇到的边距问题。就我而言，调整浏览器大小是有效的。

但你遇到的问题很常见。Internet Explorer 几乎总是显示与通常符合标准的浏览器不同的页面。人们发现解决此问题的一种方法（这可能很好地解决您的问题）是使用 CSS 重置表。

一些好的有：

• Eric Meyer 的重置 CSS
• 雅虎！YUI重置CSS

Answer 3

不幸的是，问题在于浏览器之间对于 CSS 盒模型如何决定如何处理填充存在分歧：

• 当您增加填充时，IE 会减少 div 内内容的空间，因此保持 div 大小相同
• Firefox 通过填充增加 div 大小，保持内容大小相同。

Answer 4

在IE6下测试，它似乎是一个额外的空间添加到锚标记。复制和粘贴它，你会看到自己。 Firefox不添加额外的空间。

如果您愿意，您可以更改IE的保证金。它不是一个完美的解决方案，但它可以帮助你，使标签看起来相似。如果你需要它是相同的在所有浏览器，你总是可以使用图片代替。不过，试试这个：

li a {
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
}

*html li a {
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
margin-right:-3px;
}

*+html li a {
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
margin-right:-3px;
}