Question

我有点精神想要解决这个问题。我有一个水平菜单，除了Safari之外，每个浏览器都能正常工作。在Safari中，最后一个菜单项被下推到下一行。这是此页面上的主要导航 http://www.allsafety.co.uk/

我尝试了许多不同的东西，现在我只是在一个正确的泡菜。有人可以帮忙吗？

感谢。

Answer 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)

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

希望有所帮助：）

Answer 2

有些浏览器会以不同方式处理 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 });

希望有帮助吗？

Safari中的水平菜单

2 个答案: