Problemas de CSS: con la navegación desplegable ul, li personalizada en ie, especialmente con el desbordamiento ie6: error visible

StackOverflow https://stackoverflow.com/questions/1632418

Pregunta

La esencia del error ie6 (las entradas desplegables deben truncarse a través del desbordamiento oculto para evitar que se expandan incorrectamente en lugar de actuar como desbordamiento: visible) se puede ver en su forma actual (hacky) en la captura de pantalla a continuación, y en el sitio http://zd-cms.com

Incorrecto (es decir, 6):

http://img249.imageshack.us/img249/352/screenshot68.png http://img249.imageshack.us/img249/352/screenshot68.png

Derecha (FF, IE8, Chrome):

http://img402.imageshack.us/img402/7208/screenshot69.png http://img402.imageshack.us/img402/7208/screenshot69.png

La entrada del menú debe mostrar:

  • Contáctenos
  • Revendedores
  • Soporte
  • Servicios de diseñador

Pero como no puedo obtener el desbordamiento: trabajo visible o simularlo, partes de los menús desplegables se cortan. Actualmente, el CSS en la hoja de estilo específica de ie6 es: 

#zd-nav {
  padding-left:0;
  margin-left:0;
  background-color:transparent;
}
#zd-nav .zd-sub-nav{
  margin-top:5px;
  **width:73px**;
  **overflow:hidden;**
}

Algunas soluciones al error que he probado: Soy consciente del desbordamiento ie6: error visible, (según aquí: http: // www .positioniseverything.net / explorer / expansionboxbug.html ), que hace que el desbordamiento: visible sea nulo y sin efecto. Lea: Estrategia para corregir errores de diseño en IE6? y probó algunos trucos para intentar que realmente actúe como desbordamiento: visible, pero nada funcionó.

En este momento, tengo la parte desplegable del menú configurada para desbordamiento: oculta como una última solución de zanja porque no puedo obtener ie6 para dejar que el menú actúe de forma desbordada: visible.

Señalar cualquier problema con la navegación en ie7 o ie8 también sería muy apreciado.

Sugerencias?

¿Fue útil?

Solución

Esto funcionó para mí: 

#zd-nav .zd-sub-nav li{
    float:left; 
    clear:left; 
    position:relative; 
    z-index:20; /* or some other arbitrary biggish number */
}

El flotador le da al li el ancho correcto, y la posición relativa y el índice z hacen que se muestre arriba (es decir, no limitado por) el ul.

Otros consejos

Pruebe esto (suponiendo que desea que el menú desplegable [plus sub sub sub] también se permita '' flotar '' sobre cualquier otro elemento en la página que se interponga en el camino): 

.zd-nav-active {
    position: relative;
}
.zd-sub-nav {
    position: absolute;
    z-index:10000;
}

Forzar el li que contiene la navegación secundaria a la posición relativa no cambiará la posición en la página. Sin embargo, le permite usar position absolute en elementos secundarios, mientras los mantiene contenidos en el elemento primario de forma predeterminada, y lo libera del flujo de " de la página (evitando así el efecto push down).

Prueba cualquiera: 

word-wrap:break-word; /*use this in the #zd-nav .zd-sub-nav class*/

o ... 

width:100%; /*instead of setting the width to 73px*/

podrías hacer height: 100%; también.

Es un problema de hasLayout que Microsoft inventó. Encontré la información aquí: http://zoffix.com/css/ie/haslayout.shtml

Espero que esto ayude ...

Esto debería funcionar 

#zd-nav .zd-sub-nav{ 
    margin-top:5px;
    width: auto;
    display: block;
    overflow: visible
    }

Se utiliza un ancho automático para adoptar el tamaño de cada elemento de navegación sin necesidad de dar a cada uno un ancho fijo.

Espero que esto ayude.

Sugiero usar una posición relativa al contenedor, especificando arriba, izquierda y ancho

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top