2013-05-02 3 views
2

아래 스크린 샷을 참조하십시오. PDF 문서를로드하는 jQuery 메뉴와 iframe이 있습니다. Chrome과 Firefox에서는이 기능이 완벽하게 작동하며 메뉴가 iframe 상단에 나타납니다. 메뉴에 z-index: 2, iframe에 z-index: -1이 있습니다.Internet Explorer 9에서 Z- 색인이 작동하지 않습니다.

IE에서이 문제를 해결하는 방법에 대한 아이디어가 있으십니까?

enter image description here

편집 : jsFiddle

http://jsfiddle.net/hkA2v/1/

+0

이 바이올린은 불완전; Z- 인덱스 충돌을 표시하기 위해 'iframe'또는 뭔가가 필요합니다. – Sampson

+0

@JonathanSampson이 유감입니다. 방금 업데이트했습니다. – mlevit

+0

아직 대답이 없지만 요점을 만들고 싶습니다. 문제는 iframe뿐 아니라 iframe의 PDF 파일 때문입니다. iframe에서 HTML 파일을 열면 모든 브라우저에서 정상적으로 작동합니다. –

답변

2

시도 iframeposition:relative;를 추가.

iframe{ 
    position: relative; 
} 
+0

죄송합니다. 변경 없음. – mlevit

+0

IE는 Z- 인덱스로 매우 까다 롭지 만 위치는 상대적이어야합니다. – Jared

0

모든 색인 요소가 동일한 상위의 형제인지 확인하십시오. 요소 내부에 요소 중첩을 시작하고 해당 하위 요소에 새로운 z- 색인 특성을 적용하면 z- 색인은 부모의 z- 색인에서 시작하며 상위 요소 앞에 설정된 z- 색인 특성은 시작하지 않습니다.

IE는 z- 색인으로 매우 까다 롭습니다.

2

이 특정 문제와 직접 관련이 없습니다. 그러나 IE9에서 z- 인덱스와 유사한 문제로 어려움을 겪고있는 사람들은 경우에 따라 투명 배경을 추가하는 것을 고려할 수 있습니다.

링크가있는 요소는 클릭 할 수있는 배경이 있어야하기 때문에. 그렇지 않으면 마우스가 바로 그걸 보게됩니다.

background: url(transparent.gif); 

출처 : Forum Post

+0

나는이 충고를 따르기를 꺼려했지만 트릭을했다. 나는 paint.net을 사용했고 크기를 조정하여 초기 화이트 이미지를 충분히 크게 만들었습니다 (2000x1500). 그 다음 나는 그것을 전부 선택하고 자른다. 나는 투명한 이미지를 가지고있다. –

관련 문제