不同的显示器在相同的浏览器中，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

只需将width #leo-mainnav ul li.last-item.active和#leo-mainnav ul li.last-item.active设置为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

Answer 2

您只设置边框半径

#menusys_mega {
background: url("http://portinsurance.pt/images/bg_menu.png") repeat-x scroll center top rgba(0, 0, 0, 0);
border-radius: 45px 45px 15px 15px;
box-shadow: 3px 4px 5px #888888;
margin: 0 !important;
padding: 0;
width: 101%;

}

jsfiddle