Problème alignement sous Mac

Bonjour,
Je viens poster car j'ai un gros souci d'alignement de block (liste à puces) dans un menu, mais ce problème n’apparaît uniquement sur Mac (chrome et safari).
Pour commencer, voici le problème(Mac Chrome/Safari) :

Et voici à quoi c'est censé ressemblé (Windows/Linux Chrome/IE/FF/Safari/Opera) :

Je ne comprends pas pourquoi cela ne marche pas. Dans la mesure ou le site est dans une sandbox sécurisé, je ne peux que vous donnez le code utilisé plutôt qu'un lien.

Code HTML du menu :

<ul id="top-menu-container">
    <li><span class="first"> </span></li>
    <li><a href="/signup/" class="tab-merge">{% trans "Signup" %}</a></li>
    <li><a href="#" class="tab-merge" style="text-decoration:none;">|</a></li>
    <li><a href="/login/" class="tab-merge">{% trans "Login"%}</a></li>
    <li><span class="last"> </span></li>
</ul>

Code CSS :

ul#top-menu-container{
    margin: 0 auto;
    padding: 0 auto;
    position:absolute;
    top:-38px;
    right:20px;
    text-align:right;
    width:500px;
}
#top-menu-container li, #right-menu-container li{
    list-style-type: none;
    display:inline-block;
}
#top-menu-container li span.first,#top-menu-container li span.last {
    display:inline-block;
    cursor: pointer;
    margin: 0 auto;
    margin-right:-4px;
     -moz-box-shadow:inset 0px 1px 0px 0px #97c4fe;
    -webkit-box-shadow:inset 0px 1px 0px 0px #97c4fe;
    box-shadow:inset 0px 1px 0px 0px #97c4fe;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0) );
    background:-moz-linear-gradient( center top, #3d94f6 5%, #1e62d0 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0');
    background-color:#3d94f6;
    border-top: 1px solid #337fed;
    border-bottom: 1px solid #337fed;
    border-left: 1px solid #337fed;
     -moz-border-radius-topleft: 6px;
    -webkit-border-top-left-radius: 6px;
    position:absolute;
    top:0px;
    width:5px;
    height:35px;
}
#top-menu-container li span.last{
     border-left: none;
     -moz-border-radius-topleft: 0px;
    -webkit-border-top-left-radius: 0px;
    border-right:1px solid #337fed;
    -moz-border-radius-topright: 6px;
    -webkit-border-top-right-radius: 6px;
}
#top-menu-container li a.tab-merge{
    color: white;
    display:inline-block;
    font-weight: bold;
    font-size:12px;
    padding:10px;
    text-align: center;
    cursor: pointer;
    margin: 0 auto;
    margin-right:-5px;
    -moz-box-shadow:inset 0px 1px 0px 0px #97c4fe;
    -webkit-box-shadow:inset 0px 1px 0px 0px #97c4fe;
    box-shadow:inset 0px 1px 0px 0px #97c4fe;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0) );
    background:-moz-linear-gradient( center top, #3d94f6 5%, #1e62d0 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0');
    background-color:#3d94f6;
    border-top: 1px solid #337fed;
    border-bottom: 1px solid #337fed;
}
#top-menu-container li a.tab-merge:hover{
    text-decoration:underline;
}

Merci d'avance de votre aide