0

私はこれを理解しようとして少し精神的になる. Safari を除くすべてのブラウザーで正常に動作する水平メニューがあります。Safari では、最後のメニュー項目が次の行にプッシュされます。このページのメイン ナビゲーションです http://www.allsafety.co.uk/

私はさまざまなことを試しましたが、今では自分自身が正しいピクルスになっています。誰でも助けることができますか？

ありがとう。

4

2 に答える 2

0

同様の問題を修正する必要がありました（私の場合、パディングが最初に設定されているため、すべての要素が1行に正確に収まるように、ナビゲーションラベルが変更される可能性があり、レイアウトが壊れる可能性があります）。

上記のコメントで述べたように、この場合、おそらく JS が最も信頼できるソリューションです。そのためのコードを次に示します。

(function($){
    $(document).ready(function(){
        _fix_nav_width();
    })

    $(window).load(function(){
        _fix_nav_width();
    })

    function _fix_nav_width() {
        var w = 0,
            max_w = $('.menu-main-nav-container').innerWidth(),
            length = $('#menu-main-nav > li').length,
            diff = 0,
            padd = 0;

        $('#menu-main-nav > li > a').each(function(){
            w += $(this).width(); // Get width without padding
        });
        diff = max_w - w; // Calculate the space that we should padd
        padd = ( diff / length ) / 2; // Calculate the amount of padding we should add on each side of the li's
        $('#menu-main-nav > li > a').css( { 'padding-left': padd, 'padding-right': padd } );
    }
})(jQuery)

関数を 2 回起動します - 何度$(document).ready()も何度も -$(window).load()不適切なレイアウトが一瞬表示されるかもしれませんが、IMO ではそれが最善の方法です (通常、要素のフォントはまだ on でレンダリングされていないため$(document).ready())。

それが役立つことを願っています:)

于 2012-12-04T13:17:15.357 に答える
0

一部のブラウザでは、 CSS letter-spacing / カーニングの扱いが異なります。横棒の幅より少し大きいので、押し下げているように見えます。このような場合、フォント サイズの処理方法のわずかなレンダリングの違いでも、結果に影響を与える可能性があります。

次のような特定のフォント スタイルをいじってみます。

font-size
letter-spacing
word-spacing

代わりに、最後の右側のタブからパディングを削除することもできます。

CSS :

#menu-main-nav > li:last-child > a { padding-right: 0; }

または、jQueryを使用する場合:

$('#menu-main-nav > li:last-child > a').css( { 'padding-right': 0 });

それが役立つことを願っていますか？

于 2012-12-04T13:45:09.393 に答える