Guten Morgen,

ich bin ehrlich gesagt etwas am verzweifeln. Mein HTML und CSS sieht wie folgt aus:

  
.first {  
	border-bottom: 1px solid #dad9d9;  
        margin-bottom: 31px;  
        margin-top: 75px;  
        padding-bottom: 16px;  
}  
  
.s1-navigation>li:first-child {  
	margin-left: 0;  
}  
  
.s1-navigation>li {  
	display: inline-block;  
	vertical-align: top;  
	margin-right: 13px;  
}  
  
.s1-navigation>li:first-child>a {  
	padding-left: 0px;  
}  
  
.s1-navigation>li:first-child>a:before {  
		display:none;  
}  
  
.s1-navigation>li>a {  
	padding: 0 8.4px;  
	position: relative;  
}  
  
.s1-navigation a {  
	display: block;  
	color: #3d464c;  
	font-size: 15px;  
	font-weight: 600;  
	line-height: 20px;  
}  
  
.s1-navigation>li>a:before {  
	content: "";  
	position: absolute;  
	left: -7px;  
	top: 4px;  
	height: 14px;  
	width: 1px;  
	background: #d9d9d9;  
	border: 0;  
	-webkit-transform: rotate(14deg);  
	transform: rotate(14deg);  
}  
  
.last a {  
	padding-right:0px !important;  
}  

  
    <nav class="first" role="navigation" background-adjustment="">  
       <ul class="s1-navigation" role="menubar">  
            <li class="s1-nav-item" role="presentation"><a href="" role="menuitem" >Test 1</a></li>  
            <li class="s1-nav-item" role="presentation"><a href="" role="menuitem" >Test 2</a></li>  
            <li class="s1-nav-item" role="presentation"><a href="" role="menuitem" >Test 3</a></li>  
            <li class="s1-nav-item" role="presentation"><a href="" role="menuitem" >Test 4</a></li>  
            <li class="s1-nav-item" role="presentation"><a href="" role="menuitem" >Test 5</a></li>  
            <li class="s1-nav-item" role="presentation"><a href="" role="menuitem" >Test 6</a></li>  
            <li class="s1-nav-item" role="presentation"><a href="" role="menuitem" >Test 7</a></li>  
            <li class="s1-nav-item" role="presentation"><a href="" role="menuitem" >Test 8</a></li>  
            <li class="s1-nav-item" role="presentation"><a href="" role="menuitem" >Test 9</a></li>  
            <li class="s1-nav-item last" role="presentation"><a href="" role="menuitem" >Test 10</a></li>  
         </ul>  
	</nav>  

Im Google Chrome, passt die Navigation schön über die ganze Seitenbreite. Im Firefox und IE passt der letzte Navigationspunkt nicht mehr in die Reihe und legt sich darunter. Wenn ich hier:

  
.s1-navigation>li {  
	display: inline-block;  
	vertical-align: top;  
	margin-right: 13px;  
}  

den Wert von margin-right auf 10px ändere, dann passt es wieder. Bei 10 Navigationspunkten sind dieses im ganzen 30px. Wie kann es sein, dass der Google Chrome dieses anderes darstellt wie der Firefox / Ie (beide stellen es gleich da). Ich dachte immer px sind px egal mit welchem Browser ich mir dieses anschaue.

Nun könnte ich hingehen und einfach den Wert auf 10px ändern, dann sieht es im Firefox und IE "gut" aus, allerdings habe ich dann im Google Chrome ein "großen" Abstand nach rechts. Gibt es eine Lösung, dass es in _allen_ Browsern passt?