So verbergen Sie Bildlaufleisten mit CSS

In diesem Artikel werden hauptsächlich drei Methoden verwendet, um Ihnen das Ausblenden von Bildlaufleisten in CSS zu zeigen. Hier empfehle ich natürlich die zweite Methode, basierend auf der tatsächlichen Situation. Freunde, die sich für diesen Artikel interessieren, sollten gemeinsam lernen:

Bildlaufleisten in xhtml ausblenden
Beim Durchsuchen einer gerahmten xhtml-Seite werden die horizontalen und vertikalen Bildlaufleisten standardmäßig zusammen angezeigt. Dies ist ein Fehler in ie6 , was bei Firefox normal ist, tritt aufgrund eines Fehlers in der Interpretation des XHTML 1.0-Übergangsdokumenttyps auf. Es gibt im Allgemeinen drei Lösungen für diesen Fehler:
Methode 1:
Code:
Programmcode

html { overflow-y: scroll; }

Prinzip: Erzwingen Sie die Anzeige der vertikalen Bildlaufleiste des IE und ignorieren Sie die horizontale Bildlaufleiste
Vorteile: Lösen Sie dieses Problem vollständig, sodass Sie den vollständigen XHTML-Dokumenttyp beibehalten können.
Nachteile: Vertikale Bildlaufleisten werden auch dann angezeigt, wenn die Seite keine vertikalen Bildlaufleisten erfordert.
Methode 2: (Empfohlen)
Code:
Programmcode

html { overflow-x: hidden; overflow-y: auto; }

Prinzip: Horizontales Scrollen ausblenden, vertikales Scrollen passt sich dem Inhalt an
Vorteile : Dieses Problem wird nicht zwangsweise angezeigt, wenn es nicht erforderlich ist.
Nachteile: Die horizontale Bildlaufleiste wird nur ausgeblendet, wenn die Seite die horizontale Bildlaufleiste wirklich benötigt Der Bildschirm ist nicht sichtbar, da der Benutzer nicht horizontal scrollen kann.

Methode 3:
Code: Programmcode

body { margin-right: -15px; margin-bottom: -15px; }

Prinzip: Dies fügt einen negativen Wert in der horizontalen und vertikalen Richtung des Randes hinzu, IE fügt dies einmal hinzu Der Wert ist korrekt, die Illusion der Notwendigkeit von Bildlaufleisten wird beseitigt.

Vorteile: Dieses Problem wird visuell entsprechend dem Inhalt gelöst.
Nachteile: Aufgrund des „künstlich erstellten“ 15-Pixel-Rands (Rand), daher kann der ausgefüllte Bildschirmbereich nicht genutzt werden.
------------------------------------------------ --
Stil festlegen
Im Original-HTML können wir die Bildlaufleiste der gesamten Seite so definieren
Programmcode

body{
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
scrollbar-highlight-color:#fff; /*- 左二 -*/
scrollbar-face-color:#E4E4E4; /*- 面子 -*/
scrollbar-arrow-color:#666; /*- 箭头 -*/
scrollbar-shadow-color:#808080; /*- 右二 -*/
scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
scrollbar-base-color:#D7DCE0; /*- 基色 -*/
scrollbar-track-color:#;/*- 滑道 -*/
}

Aber derselbe Code funktioniert nicht, wenn wir ihn anwenden zu xhtml Es hat funktioniert. Ich glaube, viele gute Freunde sind auf das gleiche Problem gestoßen.

Wie kann ich also den Bildlaufleistenstil unter xhtml anwenden? Schauen Sie sich den folgenden Code an
Programmcode

html{
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
scrollbar-highlight-color:#fff; /*- 左二 -*/
scrollbar-face-color:#E4E4E4; /*- 面子 -*/
scrollbar-arrow-color:#666; /*- 箭头 -*/
scrollbar-shadow-color:#808080; /*- 右二 -*/
scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
scrollbar-base-color:#D7DCE0; /*- 基色 -*/
scrollbar-track-color:#;/*- 滑道 -*/
}

Der einzige Unterschied zwischen diesem Code und dem vorherigen Absatz besteht darin, dass in den durch CSS definierten Elementen eines Körper und das andere HTML ist. Lassen Sie es uns noch einmal testen und den

„Körper“ der HTML-Seite in „HTML“ ändern, um es zu testen und festzustellen, dass der Effekt immer noch erzielt werden kann. Warum also?
Xhtml hat im wahrsten Sinne des Wortes ein x mehr als HTML, also ist dieses x tatsächlich XML. Warum müssen wir XML hinzufügen? Tatsächlich besteht der grundlegendste Grund darin, HTML strukturierter und standardisierter zu gestalten (weil HTML wirklich schlecht ist).
Was wir in HTML definieren, ist Body. Dies funktioniert, weil HTML nicht sehr Standard ist, aber in XHTML funktioniert es nicht.
Ich schaue mir das Bild an und es ist offensichtlich, dass das Body-Tag selbst nicht das Stammelement ist , nur HTML ist das Stammelement, und die Bildlaufleiste der Seite gehört ebenfalls zum Stammelement. Aus diesem Grund hat unsere Definition von body keine Auswirkung, da wir nur ein untergeordnetes Element definieren. Ok, wir kennen das Prinzip, machen wir ein Experiment. Wenn die Definition „body“ oder „xhtml“ durch „*“ ersetzt wird, wird der
Programmcode

*{ 
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
scrollbar-highlight-color:#fff; /*- 左二 -*/
scrollbar-face-color:#E4E4E4; /*- 面子 -*/
scrollbar-arrow-color:#666; /*- 箭头 -*/
scrollbar-shadow-color:#808080; /*- 右二 -*/
scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
scrollbar-base-color:#D7DCE0; /*- 基色 -*/
scrollbar-track-color:#;/*- 滑道 -*/
}

in beiden HTML-Codes übergeben und xhtml, weil *Es dient natürlich dazu, jedes Tag auf der Seite zu definieren, einschließlich des „html“-Tags.

(ps: Tatsächlich ist es nicht so sehr der Unterschied zwischen HTML und XHTML, sondern vielmehr der Unterschied, ob es einen XHTML 1.0-Übergangsdokumenttyp gibt, sondern ob Sie den XHTML 1.0-Übergangsdokumenttyp entfernen Die Seite, dann diese Seite Es gibt keinen Dokumenttyp und die Standardanzeigemethode ist HTML4.01. Sie müssen jedoch den XHTML 1.0-Übergangsdokumenttyp in den HTML 4.01-Dokumenttyp ändern. Derselbe Seitendefinitionskörper hat jedoch keine Auswirkungen (Diese Seite ist HTML 4.01)

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

CSS+HTML zum Implementieren eines einfachen Kalenders

CSS3 zum Erstellen abgerundeter Bilder und ovaler Bilder

Das obige ist der detaillierte Inhalt vonSo verbergen Sie Bildlaufleisten mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!