Bug float di Firefox? Come ottengo il mio float: proprio sulla stessa linea?

Question

Ho il seguente violino:

http://jsfiddle.net/q05n5v4c/2/

In Chrome, rende bene. Il gallone è sul lato destro.

Tuttavia, in Firefox, la Chevron scende di 1 linea.

Ho cercato su google e ho trovato diversi post su questo bug, ma nessuno dei suggerimenti ha aiutato.

Eventuali esperti di CSS che possono dirmi cosa sto facendo male?

Html:

<div class="btn-group"> 
    <button data-toggle="dropdown" 
      class="btn btn-default dropdown-toggle" 
      style="width: 400px;text-align: left;"> 

     Checked option 

     <span class="glyphicon glyphicon-chevron-down" 
       style='float: right;'></span> 
    </button> 
</div> 

Answer 1

Modificare l'ordine del galleggiante, messo prima del testo come questo:

<div class="btn-group"> 
    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle"style="width: 400px;text-align: left;">   
    <span class="glyphicon glyphicon-chevron-down" style='float: right;'></span> 
    Checked option 
    </button> 
</div> 

http://jsfiddle.net/q05n5v4c/3/

Answer 2

Qui è una soluzione più:

dai uno stile al tag span come questo.

Answer 3

Sembra che la causa del problema sia la proprietà white-space. Con la classe btn questa proprietà è:

white-space: nowrap

Se si modifica la proprietà funziona bene:

.btn { 
    white-space:normal 
} 

Controllare il Demo Fiddle

Answer 4

Se don Se vuoi invertire l'ordine dei tuoi elementi, potresti float: left; il primo elemento.