我有点精神想弄清楚这一点。我有一个水平菜单,可以在除 Safari 之外的所有浏览器中正常工作。在 Safari 中,最后一个菜单项被下推到下一行。这是此页面上的主要导航 http://www.allsafety.co.uk/
我尝试了很多不同的东西,现在我只是在正确的泡菜中。任何人都可以帮忙吗?
谢谢。
我有点精神想弄清楚这一点。我有一个水平菜单,可以在除 Safari 之外的所有浏览器中正常工作。在 Safari 中,最后一个菜单项被下推到下一行。这是此页面上的主要导航 http://www.allsafety.co.uk/
我尝试了很多不同的东西,现在我只是在正确的泡菜中。任何人都可以帮忙吗?
谢谢。
一些浏览器对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 });
希望有帮助吗?
我只需要解决类似的问题(在我的情况下,问题是导航标签可以更改,这会破坏布局,因为填充是最初设置的,因此所有元素都精确地放在一行中)。
就像我在上面的评论中所说的那样,在这种情况下,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()
)。
希望有帮助:)