css - Safari 中的水平菜单

Question

我有点精神想弄清楚这一点。我有一个水平菜单，可以在除 Safari 之外的所有浏览器中正常工作。在 Safari 中，最后一个菜单项被下推到下一行。这是此页面上的主要导航 http://www.allsafety.co.uk/

我尝试了很多不同的东西，现在我只是在正确的泡菜中。任何人都可以帮忙吗？

谢谢。

Answer 1

一些浏览器对CSS letter-spacing / kerning 的处理方式不同。它看起来好像被向下推，因为它比水平条的宽度略大。在这样的时刻，即使字体大小处理方式的轻微渲染差异也会影响结果。

我会尝试弄乱某些字体样式，例如：

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 });

希望有帮助吗？

Answer 2

我只需要解决类似的问题（在我的情况下，问题是导航标签可以更改，这会破坏布局，因为填充是最初设置的，因此所有元素都精确地放在一行中）。

就像我在上面的评论中所说的那样，在这种情况下，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)

我们触发该功能两次 -一次$(document).ready()又一次$(window).load()- 您可能会看到一秒钟不正确的布局闪烁，但 IMO 这是最好的方法（因为通常元素的字体尚未呈现$(document).ready()）。

希望有帮助:)