Question

导航菜单上有一个奇怪的问题，只出现在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;
}

Answer 1

结论：firefox 中有一个错误，如果第一个字母设置了字体大小，则错误计算元素的宽度。

此错误已于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事件会消除Tab键到链接的影响。

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

当font-size被删除或被提供给整个链接或给予范围时，差距就会消失。

链接的宽度（在Firefox中，在点击修复之前）与整个文本具有该字体大小的宽度相同。

当链接中添加了涉及调整元素大小的<{1}}效果时，第一次悬停时间隙会消失。

移除浮动时，链接宽度为100％（自然）。

Firefox计算块更大？

1 个答案: