css - Firefox计算块更大？

我在仅出现在Firefox中的导航菜单上遇到一个奇怪的问题（在IE7、8、9、10和Chrome中正常工作）。菜单上的链接显示为块，但是在Firefox中计算得出的链接比其他任何浏览器都大（宽度更大），因此它们无法正确对齐。奇怪的是，即使单击了鼠标右键，也单击了链接，然后Firefox将其设置为应有的样子。

CSS已重置，并且Firefox中会发生此问题，所以我认为这是Firefox错误？

<nav>
    <ul id="primary-nav">

        <li><a id="nav-home" href="/wordpress">HOME</a></li>
        <li><a id="nav-work" href="/wordpress/work">WORK</a></li>
        <li><a id="nav-about" href="/wordpress/about">ABOUT</a></li>
        <li><a id="nav-contact" href="/wordpress/contact">CONTACT</a></li>
        <li><a id="nav-blog" href="">BLOG</a></li>

    </ul>
</nav>


ul#primary-nav li {
    float: left;
    list-style-type: none;
    background: none;
    padding: 0;
    margin-left: 25px;
}

ul#primary-nav li a {
    font-size: 1.5em;
    display: block;
    padding-top: 40px;
}

ul#primary-nav li a#nav-home {
    background: url('./images/nav-home-button.png') top center no-repeat;
}

ul#primary-nav li a#nav-work {
    background: url('./images/nav-work-button.png') top center no-repeat;
}

ul#primary-nav li a#nav-about {
    background: url('./images/nav-about-button.png') top center no-repeat;
}

ul#primary-nav li a#nav-contact {
    background: url('./images/nav-contact-button.png') top center no-repeat;
}

ul#primary-nav li a#nav-blog {
    background: url('./images/nav-blog-button.png') top center no-repeat;
}

ul#primary-nav li a:first-letter {
    font-size: 1.3em;
}

最佳答案

结论：Firefox中有一个错误，如果其：first-letter设置了字体大小，则会错误地计算元素的宽度。

此错误已在2007年填充：https://bugzilla.mozilla.org/show_bug.cgi?id=385615。截至2013年1月，它仍然开放。从那里链接到这个答案。

实际上，从2011年9月开始的there is already a Stack Overflow question要求解决方法。

公认的解决方法是通过执行动画（credit: kizu）触发重排

@-moz-keyframes bugfix { from { padding-right: 1px ; } to { padding-right: 0; } }

.test {-moz-animation: bugfix 0.001s;}

这是演示该问题的最小测试用例（http://jsfiddle.net/6eYu6/1/）：

<div><a href="#">HOME</a></div>
<div><a href="#">WORK</a></div>

div{float: left;}
a{display: block;}
a:first-letter {font-size: 1.3em;}​

在Chrome浏览器中，没有任何间隙（预期行为）。在Firefox中，由于a元素更宽，因此存在间隙。



我的研究：

单击第一个链接或对其进行制表时，间隙消失。当链接失去焦点时，间隙不会再出现。链接重新出现在页面重新加载上。

如果href属性被删除（http://jsfiddle.net/6eYu6/2/），则间隙仍然存在。单击不再有效。

添加单击处理程序或防止单击操作（在jQuery中为return false）在任一方向上均无效。 focus事件也是如此（在存在href的情况下触发）。防止focus事件将消除制表符对链接的影响。



删除float属性并内联所有元素会导致可预测的行为（空格大小的间隙，对单击没有影响）。但是，:first-letter的效果也消失了。

除去font-size或将其赋予整个链接或将其赋予跨度时，间隙消失。

链接的宽度（在firefox中，单击修复之前）与整个文本的字体大小相同。

将涉及调整元素大小的hover效果添加到链接时，间隙在第一次悬停时消失。

移除浮点后，链接宽度自然为100％。