如何消除菜单右侧的额外空间

Question

我创建了一个简单的水平菜单，并在每个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>

.topContent{ width:940px; margin:0 auto;}
.topContent nav{ background:#ffce12; height:42px;}
.topContent nav ul{ padding:0; margin:0;}
.topContent nav li{ float:left; list-style:none;}
.topContent nav li a{ font:14px/42px Arial, Helvetica, sans-serif; color:#000; padding:0 40px; text-transform:capitalize; display:block;}
.topContent nav li a:hover, .topContent nav li a.active{ background:#464646 url(../images/hover-arrow.jpg) no-repeat center 0; display:block; color:#fff;}

- Praveen

---

你有好几个代码问题。先把它们通过W3C验证器运行，进行更正，然后再回来。 - j08691

使用浏览器调试工具，例如Firefox中的FireBug以及其他浏览器中类似的工具（通常是F12键），您可以单击元素并调查其样式以及CSS的哪个部分执行了什么操作。这通常可以帮助您快速确定为什么会出现不想要的空格或者如何添加所需的空格。调试工具甚至让您直接更改样式以检查即时结果。 - Nope

我认为这是一个字母间距的问题，因为不同的浏览器呈现不同的字母间距，即使我已经调整了字母间距，但它并没有起作用。 - Praveen

使用CSS重置来标准化跨浏览器的字体等内容。 - charlietfl

Answer 1

问题基于菜单的宽度。我认为由于每个浏览器甚至操作系统中文本呈现略有不同，因此您无法完美解决这个问题。如果菜单不是动态的，您可以尝试分别调整宽度/填充。或者，您可以将菜单的宽度除以链接数。如果某些项目太长，则可能看起来有点奇怪。如果您这样做，请确保将文本居中对齐。

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

- lukek

Answer 2

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

解决方法之一是通过调整导航项来使其对齐, 或者如果您不关心动态内容（即导航项标题长时间不变），您可以直接设置元素宽度并居中其文本。

- Oleg