Warum funktioniert Z-Index nicht mit PDFs in iFrames im Internet Explorer?

z-index funktioniert nicht im IE mit PDF in einem iFrame

Im Internet Explorer (IE) funktioniert der Versuch, z- Der Index für einen iFrame, der eine PDF-Datei enthält, kann zu unerwartetem Verhalten führen. Trotz der reibungslosen Funktion in anderen Browsern wie Chrome stoßen IE-Benutzer auf Schwierigkeiten.

Um dieses Problem zu verstehen, müssen wir uns mit dem Konzept der „fensterförmigen“ und „fensterlosen“ Elemente im IE befassen. Fensterelemente wie ActiveX-Steuerelemente und Auswahl-Dropdowns werden außerhalb der Haupt-MSHTML-Ebene des Browsers gerendert. Im Gegensatz dazu werden fensterlose Elemente, wie Divs und Eingabefelder, innerhalb dieser Ebene gerendert.

Fenster- und fensterlose Elementinteraktionen

Entscheidend ist, dass Fensterelemente immer Vorrang haben fensterlose Elemente, unabhängig vom Z-Index. Hier entsteht das Problem mit iFrames, die PDFs enthalten. Im IE werden PDFs als Fensterelemente behandelt, was bedeutet, dass sie immer über fensterlosen Elementen angezeigt werden, auch wenn letztere einen höheren Z-Index haben.

Die Lösung: Eine Lösung mit einem anderen iFrame

Leider gibt es keine einfache Lösung für dieses Problem. Eine Problemumgehung kann jedoch durch die Einführung eines weiteren iFrames zwischen dem PDF und dem Seiteninhalt erreicht werden. Dieser „Deck“-iFrame hat einen negativen Z-Index, der sicherstellt, dass er nicht sichtbar ist. Durch Blockieren des Überlaufs der PDF-Datei kann das normale Z-Index-Verhalten auf den Inhalt der Hauptseite angewendet werden, sodass Text oder andere Elemente über der PDF-Datei angezeigt werden können.

Implementierungsdetails

Der folgende Code beschreibt die Lösung:

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>

Fazit

Durch die Verwendung eines weiteren iFrames mit einem negativen Z-Index schaffen wir effektiv eine Barriere zwischen dem PDF und dem Seiteninhalt. Diese Problemumgehung ermöglicht das erwartete Z-Index-Verhalten, sodass Text oder andere Elemente im IE oben auf der PDF-Datei angezeigt werden können. Obwohl diese Lösung nicht ideal ist, bietet sie eine Möglichkeit, das Z-Index-Problem im IE zu beheben.

Das obige ist der detaillierte Inhalt vonWarum funktioniert Z-Index nicht mit PDFs in iFrames im Internet Explorer?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!