1

我在仅出现在 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;
}
4

1 回答 1

2

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

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

事实上，从 2011 年 9 月开始，已经有一个 Stack Overflow 问题要求解决。

公认的解决方法是通过执行动画来触发回流（信用：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/ )，差距仍然存在。点击不再有任何效果。

添加点击处理程序或阻止点击操作（return false在 jQuery 中）在任何一个方向上都没有效果。这同样适用于focus事件（它由存在触发href）。阻止该focus事件会消除在链接上使用选项卡的效果。

Removing the float attribute and turning all elements inline causes predictable behavior (a whitespace-sized gap, no effect on clicking). However, the effect of :first-letter disappears as well.

When the font-size is removed, or given to the whole link, or given to a span, the gap disappears.

The width of the link (in firefox, before the click-fix) is the same as if the entire text had that font size.

When a hover effect that involves resizing the element is added to the link, the gap disappears on first hover.

When the float is removed, the link width is 100% (naturally).

于 2013-01-03T01:12:15.120 回答