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

Detaillierte Erklärung zur Verwendung von Docker-Compose-Befehlen

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

Detaillierte Erklärung zur Verwendung von Docker-Compose-Befehlen

So fragen Sie Daten innerhalb eines bestimmten Zeitraums mit dem Vue-Frontend und dem Django-Backend ab

So erstellen Sie ein React-Projekt mit Vite

Implementierung von Redis mit einem Master, zwei Slaves und drei Sentinels basierend auf Docker

Welche Eigenschaften sollte eine gute Werbung haben?

Grundkenntnisse zum Lastenausgleich und ein einfaches Beispiel zum Lastenausgleich mit nginx

Acht Regeln für effektive Webformulare

Anpassungsmethode des Linux-Peripheriedateisystems

Detaillierte Erläuterung der Windows-Zeitserver-Konfigurationsmethode

Diagramm des Tutorials zur Installation der Version VMware 15.5 unter Windows_Server_2008_R2

Artikel empfehlen

CSS3 zum Erreichen eines Menü-Hover-Effekts

Detaillierter Prozessbericht der Vue2-Initiierungsanfragen mit Axios

Das Deepin20.1-System installiert MySQL8.0.23 (superdetailliertes MySQL8-Installationstutorial)

Beispiel für die Konfiguration der Timeout-Einstellung für MySQL-Datenbanken

Detaillierte Erklärung von Javascript-Closures und -Anwendungen

Bei der Verwendung von MySQL aufgetretene Probleme

Installieren Sie mysql5.7.17 mit RPM unter Linux

js implementiert das klassische Minesweeper-Spiel

Einrichten eines Proxyservers mit nginx

Drei Möglichkeiten zum Teilen der Komponentenlogik in React

Detaillierte Erklärung des Initialisierungsmechanismus in Bash

Front-End-Implementierung der GBK- und GB2312-Kodierung und Dekodierung von Zeichenfolgen (Zusammenfassung)

Detaillierter Prozess der Installation von nginx1.9.1 auf centos8

Einige Erfahrungen in der Selbstkultivierung von Künstlern

XHTML-Einführungstutorial: Verwendung von Listen-Tags