El menú horizontal UL li no se reproduce correctamente en el modo de compatibilidad IE o IE 8

Hola a todos Estoy creando un menú horizontal para un sitio que necesita ser compatible con IE 8 o IE 9 -Modo de compatibilidad. En IE 9, esto funciona bien, sin embargo, en la compatibilidad con IE8 / 9, el diseño horizontal se pierde y, como resultado, los elementos se enumeran verticalmente. El efecto de desplazamiento (imagen de fondo) sigue funcionando, al igual que los otros estilos. ¿Alguien puede echar un vistazo al CSS y decirme qué me falta para que esto se represente correctamente en versiones anteriores del navegador?

html

 <div id="navinformheader" class="topmenubar">
        <ul id="navigationmenu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Reporting</a></li>
            <li><a href="http://vair50703:7000/">Dashboard</a></li>
            <li><a href="#">My Profile</a></li>
            <li><a href="#">Management Console</a></li>
        </ul>
    </div>

CO

   .topmenubar ul a
{
    line-height: 28px;
    list-style-type:none;
    text-decoration: none;
    color: #ffffff;
    display: inline-block;
    padding: 0px 10px 0px 10px;
}

.topmenubar li  a:hover
{
    height: 28px;
    list-style-type:none;
    display: inline-block;
    text-decoration: none;
    line-height:28px;
    background-image: url('../images/topgradientBarHl.png');
    background-repeat: repeat-x;
}

.topmenubar ul
{
    display:inline-block;
    list-style-type: none;
    padding: 0;
    margin: auto 0;
}

.topmenubar li
{
    display: inline-block;
    list-style-type: none;
    padding: 0;
    margin: auto 0;
}

.topmenubar
{
    display: block;
    width: 100%;
    height: 27px;
    min-width: 920px;
    border-bottom: 1px solid #47547d;
    background-image: url('../images/topgradientBar.png');
    background-repeat: repeat-x;
} 

Gracias por adelantado

preguntado el 08 de noviembre de 11 a las 14:11

1 Respuestas

Lo siento todo, al mirar el CSS me di cuenta de que tenía un bloque en línea que estaba causando el retorno del elemento. Cambiar la propiedad de cada uno de los elementos ul y li a

display:inline;

Resuelto el problema.

Espero que esto pueda ayudar a otros al menos.

Muchas Gracias

respondido 08 nov., 11:18

De hecho, usando la pantalla: inline-block; para ul está bien. Pantalla para li de hecho debería ser inline. - netiul

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.