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 (: |
>>: CSS implementiert die Webkomponentenfunktion zum Verschieben des Nachrichtenfelds
Artikel empfehlen
So fügen Sie der Seite über Element UI eine Seitennavigationsleiste hinzu
brauchen Fügen Sie eine Paging-Leiste hinzu, die ...
Seitenlayout für Bootstrap 3.0-Lernnotizen
Dieses Mal werden wir hauptsächlich etwas über da...
MYSQL Left Join-Optimierung (10 Sekunden bis 20 Millisekunden)
Inhaltsverzeichnis 【Funktionshintergrund】 [Rohes ...
Prinzip der Ereignisdelegierung in JavaScript
Inhaltsverzeichnis 1. Was ist Eventdelegation? 2....
JS implementiert kreisförmiges Ziehen und Schieben des Fortschrittsbalkens
In diesem Artikelbeispiel wird der spezifische JS...
Reines CSS zum Lösen des Decken- und Bodenabsaugens in den Implementierungsschritten des H5-Layouts
Welche Produkte möchten Sie erwähnen? Vor kurzem ...
Detaillierte Erläuterung der perfekten CSS3+JS-Implementierung des Lupenmodus
Vor etwa einem Jahr habe ich einen Artikel geschr...
Tutorial zum Upgrade, zur Installation und Konfiguration des Supervisors auf Centos 6.5
Vorstellung des Vorgesetzten Supervisor ist ein i...
Methodenbeispiel zum sicheren Abrufen tiefer Objekte von Object in Js
Inhaltsverzeichnis Vorwort Text Parameter Beispie...
Detaillierte Erklärung des MySQL-Covering-Index
Konzept Wenn der Index alle Daten enthält, die di...
Verwenden Sie Xshell, um eine Verbindung zur virtuellen Linux-Maschine auf VMware herzustellen (grafische Schritte)
Vorwort: Ich habe vor Kurzem begonnen, den Aufbau...
Beispiel für das Einfügen eines HTML-Bilds (html add image)
Zum Einfügen von Bildern in HTML sind HTML-Tags f...
Detaillierte Erklärung der Hook-Funktion und -Nutzung im Lebenszyklus der neuen Version von React
Im Vergleich zum alten Lebenszyklus Drei Hooks we...
Tiefgreifendes Verständnis von Javascript-Prototypen und Prototypenketten
Inhaltsverzeichnis 1. Was ist ein Prototyp? 2. Pr...
Tutorial zur Installation von MYSQL5.7 aus dem OEL7.6-Quellcode
Laden Sie zunächst das Installationspaket von der...