Internet Explorer의 Iframe에서 PDF에 대한 Z-색인이 실패하는 이유는 무엇입니까?-CSS 튜토리얼-php.cn

Internet Explorer의 Iframe에서 PDF에 대한 Z-색인이 실패하는 이유는 무엇입니까?

Linda Hamilton

풀어 주다： 2024-10-26 10:24:30

원래의

799명이 탐색했습니다.

Why Does z-index Fail for PDFs in Iframes in Internet Explorer?

iframe의 PDF용 Internet Explorer에서 z-index가 실패함

문제:

z-index가 다음과 같이 작동하지 않습니다. Internet Explorer 8에서 PDF를 표시하는 iframe에 예상됩니다. iframe은 겹치는 요소 위에 표시됩니다.

설명:

Internet Explorer는 창이 있는 요소와 창이 없는 요소를 구분합니다. div 및 입력과 같은 표준 HTML 요소에는 창이 없는 반면, MSHTML 외부에 렌더링된 요소(예: 선택 요소 및 ActiveX 컨트롤)에는 창이 있습니다. IE 5에서는 iframe이 창이 있었지만 IE 5.5에서는 창이 없어졌습니다. 그러나 이전 버전과의 호환성을 위해 iframe은 더 낮은 Z-인덱스를 사용하여 창 요소를 계속 재정의합니다.

해결책:

이 문제를 해결하려면 다른 요소를 삽입하세요. 원하는 페이지 콘텐츠와 PDF iframe 사이의 iframe:

코드:

HTML:

<code class="html"><div id="outer">
    <div id="inner">my text that should be on top</div>
    <iframe class="cover" src="about:blank"></iframe>
</div>

<iframe id="pdf" src="http://legallo1.free.fr/french/CV_JLG.pdf" width="200" height="200"></iframe></code>

로그인 후 복사

CSS:

<code class="css">#outer {
    position: relative;
    left: 150px;
    top: 20px;
    width: 100px;
    z-index: 2;
}

#inner {
    background: red;
}

.cover {
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
}

#pdf {
    position: relative;
    z-index: 1;
}</code>

로그인 후 복사

이 추가 iframe은 투명한 오버레이 역할을 하여 PDF iframe이 다른 페이지 요소와 겹치는 것을 방지합니다.

지원:

이 솔루션은 Internet Explorer 7-9에서 테스트되었으며 작동합니다. 다른 브라우저와의 호환성을 위해 JavaScript를 사용하여 iframe을 추가하거나 IE 전용 조건부 주석으로 래핑하는 것을 고려해 보세요.

<code class="html"><!--[if IE]><iframe class="cover" src="about:blank"></iframe><![endif]--></code>

로그인 후 복사

위 내용은 Internet Explorer의 Iframe에서 PDF에 대한 Z-색인이 실패하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!