


Warum schlägt der Z-Index für PDFs in Iframes im Internet Explorer fehl?
Oct 26, 2024 am 10:24 AMz-index schlägt im Internet Explorer für PDFs in Iframes fehl
Problem:
z-index funktioniert nicht als erwartet für Iframes, die PDFs in Internet Explorer 8 anzeigen; Der Iframe erscheint über allen überlappenden Elementen.
Erklärung:
<div id="text">Internet Explorer unterscheidet zwischen Elementen mit und ohne Fenster. Standard-HTML-Elemente wie div und input sind fensterlos, während außerhalb von MSHTML gerenderte Elemente (z. B. ausgewählte Elemente und ActiveX-Steuerelemente) mit Fenstern versehen sind. Iframes waren in IE 5 mit Fenstern versehen, wurden jedoch in IE 5.5 fensterlos. Aus Gründen der Abwärtskompatibilität überschreiben Iframes jedoch weiterhin Fensterelemente mit niedrigeren Z-Indizes.</div>
Lösung:
Um dieses Problem zu umgehen, fügen Sie ein anderes ein iframe zwischen dem gewünschten Seiteninhalt und dem PDF iframe:
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>
Dieser zusätzliche Iframe fungiert als transparente Überlagerung und verhindert, dass der PDF-Iframe andere Seitenelemente überlappt.
Unterstützung:
Diese Lösung wurde getestet und funktioniert in Internet Explorer 7-9. Aus Gründen der Kompatibilität mit anderen Browsern sollten Sie erwägen, den Iframe mit JavaScript hinzuzufügen oder ihn in einen nur für den IE gültigen bedingten Kommentar zu verpacken:
<code class="html"><!--[if IE]><iframe class="cover" src="about:blank"></iframe><![endif]--></code>
Das obige ist der detaillierte Inhalt vonWarum schlägt der Z-Index für PDFs in Iframes im Internet Explorer fehl?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heißer Artikel

Hot-Tools-Tags

Heißer Artikel

Heiße Artikel -Tags

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Hinzufügen von Kastenschatten zu WordPress -Blöcken und -Elementen

Erstellen Sie ein JavaScript -Kontaktformular mit dem Smart Forms Framework

Erstellen Sie einen Inline -Texteditor mit dem inhaltlichen Attribut

Machen Sie Ihren ersten Seltsamen -Sufle -Übergang

Vergleich der 5 besten PHP -Formbauer (und 3 kostenlose Skripte)

Datei hochladen mit Multer in node.js und ausdrücken
