Twitter Bootstrap: Icône rendue différemment dans IE vs Firefox

Question

J'utilise le dernier twitter Bootstrap (non modifié). Le produit ci-dessous HTML résultat différent dans IE et Firefox:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="navbar-collapse collapse">   
     <ul class="nav navbar-nav navbar-right">  
      <li><p class="navbar-text">Test</p><a href:"..."> <span class="glyphicon glyphicon glyphicon-refresh"></span></a></li>        
     </ul> 
    </div> 
</div> 

Dans IE l'icône (ou la police, les icônes sont les polices de nos jours) est rendu correctement après le texte « test » sur la même ligne. Dans Firefox, l'icône est affichée sous le texte. J'aimerais que les deux affichent l'icône sur la même ligne. Quelqu'un sait ce qui se passe?

Answer 1

La réponse courte est: IE fait mal. Dans votre <li>, vous avez 2 éléments de bloc, un <p> et un <a>. Les éléments de bloc forment des blocs, donc si vous les voulez en ligne, changez-les en inline-block, ou si les éléments de menu ne sont pas liés, Test va quelque part différent de l'icône de rafraîchissement, placez-les chacun dans leur propre <li>, comme ceci:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="navbar-collapse collapse">   
     <ul class="nav navbar-nav navbar-right">  
      <li><p class="navbar-text">Test</p></li> 
      <li><a href:"..."> <span class="glyphicon glyphicon glyphicon-refresh"></span></a></li>        
     </ul> 
    </div> 
</div> 

note de commentaires: <a> balises sont normalement en ligne, mais twitter bootstrap css définit spécifiquement la balise <a> dans le <nav> sous <li> pour bloquer. .nav>li>a {display: block;}