Pourquoi z-index ne fonctionne-t-il pas avec les PDF dans les iFrames dans Internet Explorer ?

z-index ne fonctionne pas dans IE avec PDF dans un iFrame

Dans Internet Explorer (IE), tentative d'utilisation de z- index sur un iFrame contenant un PDF peut entraîner un comportement inattendu. Bien qu'ils fonctionnent parfaitement dans d'autres navigateurs comme Chrome, les utilisateurs d'IE rencontrent des difficultés.

Pour comprendre ce problème, nous devons approfondir le concept d'éléments « avec et sans fenêtre » dans IE. Les éléments fenêtrés, tels que les contrôles ActiveX et les listes déroulantes de sélection, sont rendus en dehors du plan MSHTML principal du navigateur. En revanche, les éléments sans fenêtre, comme les divs et les champs de saisie, sont rendus dans ce plan.

Interactions entre éléments avec fenêtre et sans fenêtre

Il est essentiel que les éléments avec fenêtre aient toujours la priorité sur éléments sans fenêtre, quel que soit le z-index. C'est là que se pose le problème des iFrames contenant des PDF. Dans IE, les fichiers PDF sont traités comme des éléments fenêtrés, ce qui signifie qu'ils apparaîtront toujours au-dessus des éléments sans fenêtre, même si ces derniers ont un z-index plus élevé.

La solution : un correctif utilisant un autre iFrame

Malheureusement, il n'existe pas de solution simple à ce problème. Cependant, une solution de contournement peut être obtenue en introduisant un autre iFrame entre le PDF et le contenu de la page. Cet iFrame « de couverture » a un z-index négatif, garantissant qu'il reste caché. En bloquant le débordement du PDF, il permet au comportement normal du z-index de s'appliquer au contenu de la page principale, permettant au texte ou à d'autres éléments d'apparaître au-dessus du PDF.

Détails de mise en œuvre

Le code suivant présente la solution :

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>

Conclusion

En utilisant un autre iFrame avec un z-index négatif, nous créons efficacement une barrière entre le PDF et le contenu de la page. Cette solution de contournement permet le comportement attendu du z-index, permettant au texte ou à d'autres éléments d'apparaître au-dessus du PDF dans IE. Bien que cette solution ne soit pas idéale, elle fournit un moyen de résoudre le problème du z-index dans IE.

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!