Pourquoi la propriété z-index ne fonctionne-t-elle pas avec les fichiers PDF dans les iframes dans Internet Explorer ?

z-index Problème avec les PDF dans les iframes dans Internet Explorer

En naviguant sur le Web, de nombreux développeurs sont confrontés au défi de positionner des éléments avec le z Propriété -index. En particulier, lors de l'utilisation d'iframes contenant des fichiers PDF, la propriété z-index peut ne pas fonctionner dans Internet Explorer. Bien que le problème ne se pose pas dans d'autres navigateurs comme Google Chrome, il peut entraîner des obstacles à la réalisation des arrangements visuels souhaités.

Contexte : éléments avec et sans fenêtre dans Internet Explorer

Pour comprendre l'origine du problème, il est essentiel de savoir comment Internet Explorer catégorise les éléments HTML. IE classe les éléments en deux types : avec et sans fenêtre.

• Les éléments sans fenêtre, tels que les divs et les entrées, sont directement rendus par le navigateur et occupent le même plan, en respectant leur z -valeurs d'index.
• Les éléments fenêtrés, tels que les contrôles ActiveX et les éléments de sélection, sont rendus en dehors du moteur de rendu principal du navigateur et sont dessinés au-dessus des éléments sans fenêtre, quel que soit le z-index. .

Comportement des iframes dans Internet Explorer

Initialement, les iframes étaient considérés comme des éléments fenêtrés dans IE5, mais cela a changé dans IE5.5, où ils sont devenus des éléments sans fenêtre . Cependant, pour des raisons de compatibilité ascendante, les iframes ont toujours la possibilité de dessiner sur des éléments fenêtrés avec des z-index inférieurs.

Le problème

Le problème se pose lorsqu'une iframe contenant un PDF (un élément fenêtré) est placé sur une page Web. En raison du comportement unique des iframes dans IE, tous les éléments sans fenêtre (par exemple, du texte normal ou des boutons) positionnés sur l'iframe seront masqués derrière le PDF, quelles que soient leurs valeurs d'index z.

Solution : Une Iframe de couverture

Pour résoudre ce problème, une iframe supplémentaire, appelée « iframe de couverture », est introduite. Cette iframe est positionnée entre l'iframe PDF et les éléments sans fenêtre qui doivent être affichés en haut. En définissant l'index z de l'iframe de couverture sur une valeur négative (par exemple, -1), il est effectivement placé derrière tous les autres éléments, permettant aux éléments sans fenêtre d'être visibles sur le PDF.

Implémentation

Le code HTML pour implémenter cette solution ressemblerait à ceci :

<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="path/to/pdf.pdf" width="200" height="200"></iframe></code>

Avec le CSS suivant :

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

Support du navigateur

Cette solution a été testée et confirmée pour fonctionner dans Internet Explorer 7 à 9. Il est important de noter que l'approche iframe de couverture peut ne pas être idéale pour tous les cas ou navigateurs, et des solutions alternatives peuvent être plus adaptées. en fonction des exigences spécifiques.

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!