css - 相同浏览器中的不同显示，Windows - OSX

Question

我有一个这样的菜单栏:

完美运行，但在 OSX(相同浏览器(Chrome 或 Firefox)，相同分辨率)上显示如下:

这是我的代码:

 @media (min-width: 1440px) and (max-width: 1920px) {

 .last-item .menu-title {
    margin-right: 3px;
}

 #leo-mainnav ul li.last-item:hover {
    background-color: #001b48;
    color: #fff;
    width: 134px;
}
}

http://jsfiddle.net/brfyqzqd/3/

有什么想法吗？谢谢

Answer 1

只需在 #leo-mainnav ul li.last-item.active 和 #leo-mainnav ul li.last-item.active 中设置 width 到 132px 而不是 110px。

#leo-mainnav ul li.last-item:hover {
    width:132px; /*So the Contactos is also centered when not hovering or active*/
}
#leo-mainnav ul li.last-item:active {
    background-color: #001b48;
    color: #fff;
    width: 132px;
}

#leo-mainnav ul li.last-item:hover {
    background-color: #001b48;
    color: #fff;
    width: 132px;
}

JSFiddle