css - Firefox 计算 block 更大？

Question

我在只出现在 Firefox 中的导航菜单上遇到了一个奇怪的问题(在 IE7、8、9、10 和 Chrome 中工作正常)。菜单上的链接显示为 block ，但它们在 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;
}

Answer 1

结论:firefox 中存在一个错误，如果元素的:first-letter 设置了字体大小，它会错误计算元素的宽度。

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

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

可接受的解决方法是通过执行动画 (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 被移除，或者给整个链接，或者给一个 span 时，间隙就会消失。

链接的宽度(在 firefox 中，在单击修复之前)与整个文本具有该字体大小一样。

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

移除 float 后，链接宽度为 100%(自然)。