Bonjour à tous , j'ai un cas d'incompatibilité avec IE et chrome

Je vous montre en image le soucis :

Voici mon CSS spécial pour les onglets :

/*** onglets ***/
ul#onglet {
  margin:0px; padding:0px;
  font:normal normal 12px bookman old style;
}
#onglet li {
  margin:0px; padding:0px;
  width:113px;
  line-height:2em;
  display: inline; /* affichage en ligne */
  list-style:none; /* suppression des puces */ 
  text-align:center;
  border-top:0px solid #AAA; border-bottom:1px solid #AAA;
   border-left:0px solid #AAA; border-right:1px solid #AAA;
}
#onglet li a {
  height:2em;
  display:block; /* pour occuper toute la largeur */
  text-decoration:none; /* suppression du soulignement */ 
  background-color:khaki;
  color:black; 
}
#onglet li a:hover {
  background-color:black; 
  color:white;
}
li#ongleton a {
  background-color:white;
  color:red; 
}

Merci de votre aide

PS: Internet explorer à gauche et Chrome à droite pour la photo

Chelou ...
Essaye display: inline-block;

C'est ce qu'on m'a dis de faire, j'ai essayer et sans résultat

Sa donne cela :

J'ai du modifier la taille pour que sa revient comme sur IE
Cependant voici la difference :
Pourquoi y-a-t-il des espaces?

Merci

Tes </li><li> doivent être collés. Est-ce le cas ?

<li><a href="documentation.php>">Documentation</a></li>
<li id="ongleton"><a href="#">Datasheet</a></li>
<li><a href="Schematique.php">Schématique</a></li>
<li><a href="Tests.php">Tests</a></li>
<li><a href="Reparation.php">Réparation</a></li>

Ils sont bel est bien collé

Non ils sont a la ligne ...

J'avais mal compris désolé

Et sa marche nickel mais par contre sa fais pas très lisible mdr

Il y aurai pas un autre moyen ? sinon cette solution me suffit amplement

Merci encore de m'avoir aidé.