CSS selectores de hermanos adyacentes - problema de IE8

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

  •  06-07-2019
  •  | 
  •  

Pregunta

Estoy creando un sistema de menú utilizando una estructura UL / LI. Estoy intentando usar selectores de hermanos para submenús flotantes / mostrar.

Estoy usando esto; 

#MainMenu li.Sel ul li.HasSub a:hover+ul {
     display: block;
}

La estructura de UL sería algo como esto; 

<ul id='MainMenu'>
    <li class='Sel'>
    <a href='#'>Click Me</a>
        <ul>
            <li class='HasSub'>
                <a href='#'>Hover Over Me</a>
                <ul>
                    <li>Link</li>
                    <li>Link</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Supuestamente, al pasar el cursor sobre "Desplazarse sobre mí", se debería mostrar el hermano ul. Funciona muy bien en Firefox, pero no en IE8. Estoy seguro de que he visto el selector de hermanos '+' usado en IE8 antes, ¿dónde me voy mal?

¿Fue útil?

Solución

Debe asegurarse de que IE se está ejecutando en modo estándar. Póngalo en un doctype como este: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

De la documentación :

  

El combinador de hermanos adyacente es un " signo más " (+) carácter que separa dos selectores simples. El espacio en blanco no es significativo.

     

Un selector de la forma " E + F " coincide con el elemento F cuando sigue inmediatamente al elemento hermano E en el árbol de documentos, ignorando los nodos que no son elementos (como los nodos de texto y los comentarios). Los elementos E y F deben compartir el mismo padre y E debe preceder inmediatamente a F. Para hacer coincidir el primer hijo del padre, use la pseudo-clase: primer hijo.

     

Nota requiere Windows Internet Explorer 7 o posterior.
   Nota Los combinadores están habilitados solo en modo compatible con los estándares (¡estricto! DOCTYPE).

Otros consejos

sería más sencillo agregar el elemento flotante en el elemento li y corregirlo, es decir, usar este http://www.xs4all.nl/~peterned/csshover.html

es decir 

#MainMenu li.Sel ul li.HasSub:hover {
     display: block;
}

Espero que ayude

Josh

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