2013-02-27 3 views
1

나는 순수한 CSS로 콤보 박스를 스타일링하고 튜토리얼을 찾고 콤보 상자를 만들려고 노력 중이다. 크롬과 파이어 폭스에서 잘 작동한다.z- 색인이 IE8.why에서 작동하지 않습니다?

내가 만든 스타일을 살펴보십시오.

label 
{ 
    position:relative; 
    z-index:9999; 
} 


label:after 
{ 
    content:'?'; 
    font:11px "Consolas", monospace; 
    color:#009FDF; 
    font-size:120%; 
    pointer-events:none; 
    background: #fff; 
    border:1px solid #999; 
    width:30px; 
    height:24px; 
    margin-bottom:2px; 
    position:absolute; 
    border-left:0px; 
    right:-1px; 
    z-index:99; 
} 

http://jsfiddle.net/SnU3d/1

나는이에 대한 다른 자습서를 발견했다. IE7/IE8 z-index problem, enter link description here.

그래서 부모 레이블에 대한 zindex 값을 높게 설정했습니다.하지만 여전히 after pseudo 요소가 IE8에 나타나지 않습니다. 왜 ? 애프터 컨텐츠를 어떻게 보이게 할 수 있습니까?

+0

오프 주제이지만'font : 11px ... font-size : 120 %'는 무엇이라고 생각하십니까? –

+0

어쨌든 가장 먼저 확인해야 할 것은 페이지가 표준 준수 모드로 렌더링되었는지 여부입니다. quirks 모드에서 IE8은'content' 나': after'를 지원하지 않는 오래된 렌더링 엔진으로 되돌아갑니다. –

+0

@MrLister fontsize는 삼각형을 약간 더 크게 보이게하기위한 것입니다. 글꼴을 삭제했습니다 : 11px, 여기에 대해 죄송합니다. 그리고 표준 모드로 콘텐츠를 가져오고 있습니다. 유일한 문제는 z- 색인입니다. – svk

답변

0

:after 의사 요소는 (Label)에 적용 할 요소의 아이를 만들고, 그 값이 무엇이든 부모 (label)에 할당 Z- 인덱스 값은, 그 내부의 새로운 스태킹 문맥을 작성합니다 요소이므로 스태킹 컨텍스트의 레벨 9999에 부모 요소 (label)가 생기고 부모 (label)가 항상가는 스택 작성 컨텍스트의 수준 99에 자식 요소 (label:after)가 생깁니다 배경 (하단).

관련 문제