Разные дисплеи в одних и тех же браузерах, 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