火狐显示的文本比其他文本大

Question

我有一个由li元素组成的菜单栏，每个元素都向左浮动以并排放置。这适用于大多数浏览器，但不适用于我客户的火狐浏览器（mac版本26）li有点大，使它们在行尾溢出（可能在一起10px）

知道为什么吗？我有一个 css 重置，边距和填充设置为一个值。

这是 HTML：

<ul id="menu">
                <li class="menuItem"><a class="menuItemLink" href="interface.php?type=architecture&amp;page=projets-realisations">projets-realisations</a>
                    <ul class="subMenu">
                        <li class="subMenuItem"><a class="subMenuItemLink" href="interface.php?type=architecture&amp;page=projets-realisations-en-resume">En résumé</a></li>
                        <li class="subMenuItem"><a class="subMenuItemLink" href="interface.php?type=architecture&amp;page=projets-realisations-az">De A à Z</a></li>
                    </ul>
                </li>
                <li class="menuItem"><a class="menuItemLink" href="interface.php?type=architecture&amp;page=portes-parquets-escaliers">Portes-parquets-escaliers</a> </li>
                <li class="menuItem"><a class="menuItemLink" href="interface.php?type=architecture&amp;page=cuisines-salles-de-bain">cuisines-salles de bain</a> </li>
                <li class="menuItem"><a class="menuItemLink" href="interface.php?type=architecture&amp;page=decoration-tentures">decoration-tentures</a> </li>
                <li class="menuItem"><a class="menuItemLink" href="interface.php?type=architecture&amp;page=de-ville-en-ville">de ville en ville</a> </li>
                <li class="menuItem"><a class="menuItemLink" href="interface.php?type=architecture&amp;page=espace-animalier">espace animalier</a> </li>
            </ul>

.css：

.menuItem {float:left; cursor: default; position: relative; margin-left:4px; padding:0px; margin-right:0px;}
.menuItem:last-child {margin-right:-50px;}
.menuItemLink {line-height: 20px; color: #ffffff; text-transform: uppercase; font-size: 13px; padding-left:5px; padding-right: 5px; text-decoration: none;}

右边距 -50 只是为了确保最后一个元素不会出现在新行上......为什么被他的火狐误判了？最奇怪的是我在Mac上尝试了相同的Firefox版本（不同的osversion），但没有这个问题。

Answer 1

您需要增加菜单项的右边距

margin-right: 15px;

您可以检查 http://jsfiddle.net/raunakkathuria/vRns2/

如果您不需要列表样式，请添加到 .menu

list-style-type: none;

并display: inline-block .menuItem ，那么您不必玩边距

Answer 2

尝试了所有建议，但没有奏效，毕竟将所有填充替换为组合边距，现在一切正常