2009-09-23 10 views
13

Al ejecutar en modo compatibilidad, el calendario siguiente se muestra detrás de los cuadros de texto a continuación. IE8 muestra el calendario como lo necesito.IE7/IE8 Problema z-index

Mi CSS

.MyCalendar .ajax__calendar_container 
{ 
border:1px solid #7F9DB9; 
background-color: #ffffff; 
z-index : 1004 ; 
width:190px; 
} 

los cuadros de texto que están superponiendo el calendario no tienen su índice z establecer en cualquier lugar aunque he intentado en mi código del lado del servidor para establecer su índice z a -1 si detectar IE7 en vano. ¿Alguna sugerencia? alt text http://img62.imageshack.us/img62/7127/overlay.gif

Respuesta

32

IE tiene problemas con z-index. La mayoría de los navegadores tratan la página como un contexto de pila continua, pero en IE, elementos posicionados generan un nuevo contexto de apilamiento, comenzando con un valor de índice z de 0.

Como se menciona en este artículo:

http://trwa.ca/2012/03/ie-z-index-bug-and-how-to-squash-it/

intente dar al elemento principal del calendario un índice z aún mayor.

+3

No debería decir que IE7 tiene "problemas", simplemente maneja el índice Z de manera diferente que otros navegadores. – rhodesjason

+56

Y eso sería un problema. – Toji

+0

Qué publicación afortunada: estaba teniendo el mismo problema – user97410

2

Finalmente lo tengo en la parte superior con una imagen de fondo transparente adicional. IE8. SASS:

#galerie-link { 
    position: absolute; 
    z-index: 1000; 
    top: 25px; 
    left: 40px; 
    a { 
     display: block; 
     width: 185px; 
     height: 90px; 
     background-image: url(../images/transparent.png); 
    } 
    } 
+1

su gif de espaciador transparente salvado por el culo. gracias. – Dummy

Cuestiones relacionadas