Javascript 如何摆脱菜单右侧多余的空间

我创建了一个简单的水平菜单，在每一个LI中都有相同的左右填充，但在ie版本中，它在最后一个LI之后或下一行留下了额外的空间

我花了3个小时使其跨浏览器兼容，但最终以失败告终。当我在最后一个LI上添加额外的填充来调整空间时，它在firefox中表现良好，但在ie中显示不需要的空间。 我想让它在不使用黑客的情况下跨浏览器兼容

代码如下：

<section class="topContent">
    <nav>
        <ul>
            <li><a href="javascript:;">home</a>
            </li>
            <li><a href="javascript:;">earthmoving</a>
            </li>
            <li><a href="javascript:;">attachments</a>
            </li>
            <li><a href="javascript:;">power systems</a>
            </li>
            <li><a href="javascript:;">truck tailer</a>
            </li>
            <li><a href="javascript:;">ag equipment</a>
            </li>
        </ul>
    </nav>
    <!--/nav-->
</section>

你的“设计公司”CSS根本没有对齐/隔开项目，你只是调整了填充值，使其在一个浏览器上工作

---

一种解决方法是，或者如果您对动态内容不感兴趣（即导航项目标题在很长时间内不会更改），您可以明确设置元素宽度并将其文本居中。

问题取决于菜单的宽度。我相信，因为文本在每个浏览器甚至操作系统中呈现略有不同，所以你不会得到如此完美的效果。如果菜单不是动态的，您可以尝试分别调整宽度/填充。或者，您可以将菜单宽度除以链接数。如果某些项目太长，可能看起来有点奇怪。如果执行此操作，请确保将文本对齐在中心

nav a {
    padding: 0; /*just need to remove the padding*/
    width: 156.6px; /*940 / 7 (the amount of links)*/
    text-align:center; 
}

---

您有几个代码问题。首先通过W3C验证程序运行它，更正它们，然后返回。使用浏览器调试器工具，即Firefox中的FireBug和其他浏览器中的类似工具（通常是F12默认键），您可以单击元素并调查它的样式以及CSS的哪个部分做了什么。这通常有助于您快速确定为什么有一个不需要的空间，或者在需要的地方更改什么以添加空间。调试器工具甚至允许您直接更改样式以检查即时结果。我们认为这是一个字母间距问题，因为不同的浏览器呈现不同的字母间距，尽管我使用了字母间距，但它无法工作使用css重置来标准化跨浏览器的字体等内容