Bug de Firefox? Comment puis-je obtenir mon flotteur: directement sur la même ligne?

J’ai le violon suivant:

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

Dans Chrome, ça rend bien. Le chevron est sur le côté droit.

Cependant, dans Firefox, il abaisse le Chevron d’une ligne.

J’ai cherché sur Google et trouvé plusieurs articles sur ce bogue, mais aucune des suggestions n’a aidé.

Des experts CSS peuvent-ils me dire ce que je fais mal?

Html:

Changer l’ordre du flottant, le mettre avant le texte comme ceci:

 

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

Il semble que l’ white-space la propriété soit la cause du problème. Avec la classe btn cette propriété est:

espace blanc: maintenant

Si vous changez cette propriété fonctionne bien:

 .btn { white-space:normal } 

Vérifiez le violon de démonstration

Si vous ne voulez pas inverser l’ordre de vos éléments, vous pouvez float: left; le premier élément.

Enlevez le flotteur sur la travée, ajoutez-y la position: absolute et positionnez-le en haut / droite / bas / gauche.
Note: .btn-group a déjà la position: relative par position: relative au bootstrap.

HTML

 

CSS

 div.btn-group span { position: absolute; top: 7px; right: 12px; } 

Voici un violon de travail.

Voici une autre solution:

donnez du style à votre balise span comme ceci.

 position:absolute; right: 5px; top : 9px