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 に font-size が設定されている場合、要素の幅を誤って計算するバグが Firefoxに存在します。

このバグは 2007 年に修正されました: https://bugzilla.mozilla.org/show_bug.cgi?id=385615。2013 年 1 月現在、まだ営業しています。そこからこの回答にリンクします。

実際、回避策を求める 2011 年 9 月のスタック オーバーフローの質問が既にあります。

受け入れられている回避策は、アニメーションを実行してリフローをトリガーすることです (クレジット: 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同じことがイベントにも当てはまります(presentでトリガーされhrefます)。イベントを防止するfocusと、リンクへのタブ移動の効果がなくなります。

属性を削除し、floatすべての要素をインラインにすると、予測可能な動作が発生します (空白サイズのギャップ、クリックしても影響はありません)。ただし、 の効果も:first-letter消えます。

がfont-size削除されるか、リンク全体に付与されるか、スパンに付与されると、ギャップがなくなります。

リンクの幅 (Firefox では、クリック修正前) は、テキスト全体がそのフォント サイズであるかのように同じです。

要素のサイズ変更を含む効果hoverがリンクに追加されると、最初のホバーでギャップが消えます。

フロートを外すとリンク幅は（当然）100％。

于 2013-01-03T01:12:15.120 に答える