Проблема совместимости IE: <span>внутри <h2>

Question

У меня есть следующий HTML / CSS, в котором просто есть тег <span>, стилизованный с float:right внутри тега <h2>:

<style>h2{background-color:#e2e2e2;}
span{float:right;border:1px solid red;}</style>
<h2>H2 Test <span>SPAN text</span></h2>

В Firefox все работает хорошо (и я подозреваю, что в других хороших браузерах, таких как Chrome, Opera и т. Д.), Но в IE <span> переносится на следующую строку.

Примечание: на рисунке показан пример Firefox и IE.

Как я могу заставить IE дублировать поведение Firefox?

Дополнительная информация: я не привязан к использованию float:right, все, что мне действительно нужно, это часть текста, выровненная по левому краю, и часть текста, выровненная по правому краю в пределах <h2>. Я пробовал множество вещей, но IE всегда кажется браузером, который просто не будет работать. Любая помощь будет оценена.

Answer 1

html:

<h2><span class="_1">H2 Test</span><span class="_2">SPAN text</span></h2>

css:

h2{background-color:#e2e2e2;overflow:hidden}
span._1{float:left}
span._2{float:right;border:1px solid red;}

jsfiddle demo: http://jsfiddle.net/shmZR/