Lösung für die horizontale Bildlaufleiste im Iframe unter IE6

Die Situation ist wie folgt: (PS: Das rote Kästchen stellt den Iframe-Bereich dar und das graue Rechteck stellt das oben erwähnte Element mit der Breite: 100 % dar. Sie müssen IE6 verwenden, um den Effekt zu sehen.)
Wenn die Höhe des grauen Felds größer als die Höhe des Iframes ist, werden vertikale und horizontale Bildlaufleisten angezeigt (unter IE6).

Der Effekt ist normal, wenn die Höhe der grauen Box kleiner ist als die Höhe des Iframes.

Lösung 1: Fügen Sie der inneren Seite Stil hinzu: html { overflow-y: scroll; }
Wenn die Höhe des grauen Felds größer als die Höhe des Iframes ist, wird nur die vertikale Bildlaufleiste angezeigt und der Effekt ist korrekt.

Wenn die Höhe des grauen Felds kleiner als die Höhe des Iframes ist, wird die vertikale Bildlaufleiste weiterhin angezeigt (nicht verfügbar), was einen Fehler darstellt.

Lösung 2: Fügen Sie der inneren Seite einen Stil hinzu: html { overflow-x: hidden; overflow-y: auto; }
Wenn die Höhe des grauen Felds größer als die Höhe des Iframes ist, wird nur die vertikale Bildlaufleiste angezeigt, aber der Inhalt auf der rechten Seite wird nicht vollständig angezeigt (PS: Der Text darin lautet „Dies ist ein Div mit einer Höhe von 200 Pixeln“) und der Effekt ist falsch.

Wenn die Höhe des grauen Felds geringer ist als die Höhe des Iframes, wird keine Bildlaufleiste angezeigt und der Effekt ist korrekt.

Lösung 3: Nach vielen Versuchen haben wir noch immer nicht die perfekte reine CSS-Lösung gefunden und streben nach dem perfektesten Effekt. Da reines CSS das Problem nicht lösen kann, müssen wir JS verwenden. Durch den vorherigen Test haben wir festgestellt, dass keine Verarbeitung erforderlich ist, um den richtigen Effekt zu erzielen, wenn die Höhe des grauen Felds kleiner als die Höhe des Iframes ist, und wenn die Höhe des grauen Felds größer als die Höhe des Iframes ist, ist Lösung 1 perfekt. Daher hat unser JS die folgende Idee: Wenn der Browser IE6 ist und die Inhaltshöhe höher als das Iframe ist, fügen Sie dem HTML-Tag den Stil der Lösung 1 hinzu. Hier ist der jQuery-Code: (Die Idee ist ohne jQuery dieselbe.)

Code kopieren

Der Code lautet wie folgt:

$(Funktion(){
wenn($.browser.msie&&$.browser.version=="6.0"&&$("html")[0].scrollHeight>$("html").height()) $("html").css("overflowY","scroll");
});

Wenn die Höhe des grauen Felds größer als die Höhe des Iframes ist, wird nur die vertikale Bildlaufleiste angezeigt und der Effekt ist korrekt.
Der Effekt ist korrekt, wenn die Höhe des grauen Felds kleiner ist als die Höhe des Iframes.
Lerne jeden Tag glücklich zu sein (:

<<: So implementieren Sie die Zuordnung zwischen Rahmenfenstern und die Verwendung des Zielattributs von Hyperlinks

>>: CSS implementiert die Webkomponentenfunktion zum Verschieben des Nachrichtenfelds

HTML-Tutorial: Titelattribut und Alt-Attribut

Lösung für die horizontale Bildlaufleiste im Iframe unter IE6

HTML-Tutorial: Titelattribut und Alt-Attribut

Beispielcode für die automatische Aktualisierung von Webseiten und den automatischen Sprung

Installationstutorial für MySQL 5.1 und 5.7 unter Linux

Der Unterschied und die Gründe zwischen den MySQL-Abfragebedingungen nicht in und in

Konventionelle JS-Verarbeitungsfunktionen für die Entwicklung von Vue Element-Frontend-Anwendungen

Schreiben Sie mit CSS in drei Schritten einen Coupon für eine Shopping-Card

Detaillierte Beschreibung des HTML-Meta-Viewport-Attributs

Detaillierte Erläuterung des Lesevorgangs für Nginx-Anforderungsheaderdaten

Codebeispiele für die Sicherung mehrerer MySQL-Datenbanken

So visualisieren Sie skizzierte Diagramme in Vue.js mit RoughViz

Artikel empfehlen

Beispielcode zum Erstellen eines minimierten Header-Effekts nur mit CSS

So verbergen und entfernen Sie Bildlaufleisten in HTML

Detaillierte Schritte zur Installation von Tomcat, MySQL und Redis mit Docker

Interpretieren von MySQL-Client- und Serverprotokollen

Grafisches Tutorial zur Installation und Konfiguration von mysql8.0.11 winx64 (win10)

Lösung für „Keine Eingabedatei angegeben“ in nginx+php

Grafische Schritte zur Zabbix-Überwachung des VMware Exsi-Hosts

Beispielerklärung für langsame MySQL-Abfragen und -Protokolle

Beispielcode für ein einfaches, nahtlos scrollendes Karussell, implementiert mit nativem Js

So überprüfen Sie, ob die Firewall in Linux ausgeschaltet ist

Beispielcode für die Verwendung von Textausrichtung und Rand: 0 automatisch zentrieren in CSS

So verwenden Sie CURRENT_TIMESTAMP in MySQL

Eintauchen in die JS-Vererbung

Detaillierte Erklärung des Ref-Attributs von Vue

CSS-Vererbungsmethode