Problema con barra de progreso en CSS

[Hbayly]

Hola a todos.

Tengo un problemilla, resulta que estoy creando con Divs y CSS una barra de progreso, se ve bien desde Firefox - Chrome, pero con Internet Explorer se ve descuadrada la imagen del centro mas abajo que la otra y más

Estas son las imagenes:
Izquierda.jpg: i43.tinypic.com/iejh47.jpg
Centro.jpg: i43.tinypic.com/opz383.jpg
Derecha.jpg: i44.tinypic.com/dfka44.jpg

Este es el CSS:

Código:

.Barra {width: 120px;}
.Barra_A {width: 5px;float:left;}
.Barra_B {width: 100%;}
.Barra_C {width: 1px;float:right;}

Divs:

Código:

<div class="Barra" style="background-image:url(centro.jpg)">
<span class="Barra_A"><img alt="" src="izquierda.jpg" height="11"/></span>
<span class="Barra_C"><img alt="" src="derecha.jpg"/></span>
<span class="Barra_B"><img alt="" src="centro.jpg" height="11"/></span>
</div>

Como puedo hacer que se alineen bien para IE, este es mi problema y no encuentro una solución :(

Agradecería cualquier ayuda,

[Adryi19]

pues prueba valores y pon un if condicional en tu documento y ahi los estilos solo par ie lamento no poder ayudarte pero se que con eso leera esos estilos solo ie

[Mikmoro]

No estoy muy seguro de lo que quieres hacer, pero pruébalo así:

<div class="Barra" style="background-image:url(centro.jpg)">
<span class="Barra_C"><img alt="" src="derecha.jpg"/></span>
<span class="Barra_A"><img alt="" src="izquierda.jpg" height="11"/></span>
<span class="Barra_B"><img alt="" src="centro.jpg" height="11"/></span>
</div>

CSS:

.Barra {width: 120px;}
.Barra_A {width: 5px;float:left;}
.Barra_B {}
.Barra_C {width: 1px;float:right;}