Sélecteurs de fratrie adjacents CSS - problème IE8

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

  •  06-07-2019
  •  | 
  •  

Question

Je crée un système de menus utilisant une structure UL / LI. J'essaie d'utiliser des sélecteurs de même niveau pour les sous-menus de survol / show.

J'utilise ceci; 

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

La structure UL ressemblerait à quelque chose comme ceci; 

<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>

Soi-disant, lors du survol de "Survol de moi", le frère ul devrait être affiché. Cela fonctionne très bien dans Firefox, mais pas du tout dans IE8. Je suis sûr que j'ai déjà vu le sélecteur de frère '+' utilisé dans IE8, où est-ce que je me trompe?

Était-ce utile?

La solution

Vous devez vous assurer qu'IE fonctionne en mode standard - définissez un type de document comme celui-ci: 

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

De la la documentation :

  

Le combinateur frère adjacent est un "signe plus". (+) caractère séparant deux sélecteurs simples. Les espaces ne sont pas significatifs.

     

Un sélecteur de la forme "E + F" Correspond à l'élément F lorsqu'il suit immédiatement l'élément frère E dans l'arbre du document, en ignorant les nœuds non-éléments (tels que les nœuds de texte et les commentaires). Les éléments E et F doivent partager le même parent et E doit précéder immédiatement F. Pour faire correspondre le premier enfant du parent, utilisez la pseudo-classe: first-child.

     

Remarque : Windows Internet Explorer 7 ou version ultérieure est requis.
   Remarque Les combinateurs ne sont activés qu'en mode conforme aux normes (strict! DOCTYPE).

Autres conseils

serait-il plus simple d’ajouter le survol sur l’élément li et de le fixer, par exemple, à l’aide de cette http://www.xs4all.nl/~peterned/csshover.html

c'est-à-dire 

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

L’espoir que cela aide

Josh

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top