Pourquoi z-index échoue-t-il pour les PDF dans les Iframes dans Internet Explorer ?

z-index échoue dans Internet Explorer pour les PDF dans les iframes

Problème :

z-index ne fonctionne pas comme attendu pour les iframes affichant des fichiers PDF dans Internet Explorer 8 ; l'iframe apparaît au-dessus de tous les éléments qui se chevauchent.

Explication :

Internet Explorer fait la différence entre les éléments avec et sans fenêtre. Les éléments HTML standard tels que div et input sont sans fenêtre, tandis que les éléments rendus en dehors de MSHTML (par exemple, les éléments sélectionnés et les contrôles ActiveX) sont fenêtrés. Les iframes étaient fenêtrées dans IE 5 mais sont devenues sans fenêtre dans IE 5.5. Cependant, pour des raisons de compatibilité ascendante, les iframes remplacent toujours les éléments fenêtrés avec des z-index inférieurs.

Solution :

Pour contourner ce problème, insérez un autre iframe entre le contenu de la page souhaitée et l'iframe PDF :

Code :

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>

Cette iframe supplémentaire agit comme une superposition transparente, empêchant l'iframe PDF de chevaucher d'autres éléments de la page.

Support :

Cette solution a été testée et fonctionne dans Internet Explorer 7-9. Pour des raisons de compatibilité avec d'autres navigateurs, envisagez d'ajouter l'iframe à l'aide de JavaScript ou de l'envelopper dans un commentaire conditionnel réservé à IE :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!