Bordes superior e inferior en Explorer

[PosProdukcion]

Hola, tengo un div que el IExplore no me muestra los bordes superior e inferior, creo que es por que hay una distancia insuficiente con los objetos de arriba y abajo, si pongo por ejemplo un hr entre medias me los muestra, pero no quiero separarlo tanto, a ver si con imágenes se entiende mejor:

Firefox (correcto):


Internet Explorer:

El código:

Código html:

<!-- CONTENEDOR -->
<div class="areaItems">
   <!-- hr style="visibility:hidden" /-->
   <div class="botonIndice">
        <a href="javascript:desplegarIndice()" title="Desplegar &iacute;ndice">
        <span>&Iacute;NDICE</span>
        <img src="imagenes/abajo2.png" class="icono" alt="Desplegar &iacute;ndice" />
        </a>
   </div>
  <!-- AQUI VA UN DIV OCULTO (position:absolute) QUE SE MUESTRA AL PULSAR EL LINK -->
</div>
 

El CSS:

Código css:

.areaItems {
    position: relative;
    float: right;
    width: 32%;
    text-align: right;
}
 
.botonIndice{
    display: inline;
    margin: 4px;
    padding: 3px;
    color: #40849b;
    background-color: white;
    border: 1px solid #40849b;
    font-style: italic;
    font-weight: bold;
}
 
.botonIndice a{
    color: #40849b;
    text-decoration: none;
}
 
.icono
{
    display: inline;
    border: 0px;
}
 
a .icono:hover
{
    border: 0px;
    text-decoration: none;
}
 

Lo que quiero es que los bordes se vean en IE, claro

Gracias, saludos