0

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

<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 中制作文本？

4

4 回答 4

0

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

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

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

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

一些好的是：

于 2009-06-24T20:01:13.307 回答
0

不幸的是，浏览器之间在 CSS 盒子模型决定如何处理填充方面存在分歧：

  • 当您增加填充时，IE 会减少 div 内内容的空间，因此保持 div 大小相同
  • Firefox 使用填充增加 div 大小，保持内容大小相同。
于 2009-06-24T20:01:47.470 回答
0

在 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;
}
于 2009-06-24T20:14:04.793 回答
0

简单地回答您的问题：将所有li元素放在一行或浮动它们。

于 2009-06-24T20:18:20.590 回答