CSS seletores irmãos adjacentes - problema IE8

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

  •  06-07-2019
  •  | 
  •  

Pergunta

Estou criando um sistema de menu usando uma estrutura UL / LI. Eu estou tentando usar irmão seletores para pairar / show-sub-menus.

Estou usando este; 

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

A estrutura UL seria algo como isto; 

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

Supostamente, quando pairando sobre "Hover Over Me", o ul irmão deve ser exibido. Ele funciona muito bem no Firefox, mas não em todos no IE8. Eu estou certo que eu vi o '+' selector irmão utilizado no IE8 antes, errado para onde vou?

Foi útil?

Solução

Você precisa ter certeza de IE está em execução no modo de padrões - colocar em um doctype como esta: 

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

A partir a documentação :

O elemento de combinação irmão adjacente é um "sinal de mais" (+) caracteres que separa dois seletores simples. Espaços em branco não é significativo.

Um seletor da forma "E + F" corresponde elemento F quando se segue imediatamente irmão elemento E na árvore do documento, ignorando nós não-elementos (como nós de texto e comentários). Elemento E e F devem compartilhar o mesmo pai e E deve preceder imediatamente F. Para coincidir com o primeiro filho do pai, use o:. Pseudo-classe primeira criança

Nota Requer o Windows Internet Explorer 7 ou posterior.
Nota Combinadores só são ativadas em compatível com os padrões modo (estrita! DOCTYPE).

Outras dicas

seria mais simples para adicionar a pairar sobre o elemento li e corrigir o foco para o IE usando este http://www.xs4all.nl/~peterned/csshover.html

ie 

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

Espero que ajude

Josh

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top