Menú CSS Emisión IE7

El menú funciona en todos los principales navegadores pero se ve diferente en IE7. Ver capturas de pantalla a continuación.
Ver demostración en http://jsfiddle.net/FQLdm/6/Menú CSS Emisión IE7

Al pasar el mouse sobre el enlace de inicio, verá un submenú. En IE7, tanto el botón del menú como el submenú se presionan hacia arriba.

Esto sucedió cuando reemplazó esta

.menu1 ul.menu li{ 
    position: relative; 
    list-style-type: none; 
    display:block; 
    float:left; 
}

con este (necesito utilizar esta forma inline-block para centrar los elementos de la lista)

.menu1 ul.menu li{ 
    position: relative; 
    list-style-type: none; 
    display:inline; 
    display:inline-block; 
    *display:inline; /*IE7*/ 
    *zoom:1; /*IE7*/ 
}

En Chrome se ve bien In chrome it works fine

En IE7 parece diferente. Observe cómo se levanta el botón de inicio. debería verse como la captura de pantalla de Chrome anterior.

In IE7 it looks different

Fuente

2011-12-27 Pinkie

Es muy probable que tenga algún tipo de problema de margen. ¿Tiene un script reset css? No puedo estar 100% seguro, pero parece que el submenú está "empujando hacia arriba" el elemento del menú principal, que como he dicho antes es muy probable que tenga algún tipo de problema de margen. – Matt

@matt Ya tengo un restablecimiento de CSS. no es el problema. Esto solo sucedió cuando usé 'inline-block' en lugar de' block'. Lea más arriba – Pinkie

ohhh me extrañé por completo: p, es porque IE7 realmente no es compatible con Inline-Block. Solo es de IE8 +. Tal vez usar float: left with a margin-left? – Matt

Escribe vertical-align:middle en tu li. De esta manera:

.menu1 ul.menu li{ 
    vertical-align:middle; 
    position: relative; 
    list-style-type: none; 
    display:inline; 
    display:inline-block; 
    *display:inline; /*IE7*/ 
    *zoom:1; /*IE7*/ 

}

Fuente

2011-12-27 09:41:59 sandeep

Eso es perfecto. vertical-align fue de hecho el problema. funciona. Gracias – Pinkie

algo como esto

puso en archivo html antaño en la cabeza

<!--[if lte IE 7]> 
    <style> 
    .menu1 ul li ul { 
     position:absolute; 
     top: 5px or 10px; 
    } 
    .menu1 { 
     position: relative; 
    } 
    </style>   
<![endif]-->

Fuente

2011-12-27 08:18:41

Esto no funciona. Deberías probarlo en jsfiddle. – Pinkie

http://jsfiddle.net/amkrtchyan/qzNKd/ en mi ie7 funciona bien –

Sí, lo noté. No lo intentes en jsfiddle. Parecen ejecutar esto en un navegador estándar internamente. solo copia y pega el css y html localmente y pruébalo – Pinkie

enter image description here

Ejemplo funciona bien en Internet Explorer 7 en mi PC.

Fuente

2011-12-27 08:55:56

Puede ser un comentario en lugar de una respuesta :) – sandeep

sí, es un comentario –

así que escríbalo como un comentario en el cuadro de comentarios en lugar de las respuestas – sandeep

Consulte esta respuesta: IE6 extra padding on bottom

Además, no establecer display:block a veces puede causar problemas de relleno, como lo fue para mí una vez. Intente agregar eso al CSS para ver si algo mejora.

Fuente

2011-12-27 09:19:44

Respuesta

Cuestiones relacionadas