CSS 인접한 형제 선택기 - IE8 문제

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

  •  06-07-2019
  •  | 
  •  

문제

UL/Li 구조를 사용하여 메뉴 시스템을 만들고 있습니다. 나는 호버/쇼 서브 메뉴에 형제 자매를 사용하려고합니다.

나는 이것을 사용하고있다;

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

UL 구조는 이와 같은 것이 될 것입니다.

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

아마도 "나에게 호버링"위로 호버링 할 때 형제 자매를 표시해야합니다. Firefox에서는 잘 작동하지만 IE8에서는 전혀 작동하지 않습니다. 나는 이전에 IE8에서 사용 된 '+'형제 선택기를 보았을 것이라고 확신합니다. 어디에서 잘못되고 있습니까?

도움이 되었습니까?

해결책

IE가 표준 모드에서 실행 중인지 확인해야합니다.

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

에서 문서:

인접한 형제 조합은 두 개의 간단한 선택기를 분리하는 "플러스 부호"(+) 문자입니다. 공백은 중요하지 않습니다.

"e+f"형식의 선택기는 문서 트리의 형제 요소 e를 즉시 따를 때 요소 F와 일치하여 비 요소 노드 (예 : 텍스트 노드 및 주석)를 무시합니다. 요소 E와 F는 동일한 부모를 공유해야하며 E는 F에 바로 앞에 있어야합니다. 부모의 첫 번째 자녀와 일치하려면 다음을 사용하십시오.

메모 Windows Internet Explorer 7 이상이 필요합니다.
메모 콤비네이터는 표준 호환 모드 (엄격한! doctype)에서만 활성화됩니다.

다른 팁

Li 요소에 호버를 추가하고 이것을 사용하여 즉, 즉 호버를 고치는 것이 더 간단할까요? http://www.xs4all.nl/~peterned/csshover.html

즉

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

도움이되기를 바랍니다

조롱

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top