Wie ist der CSS-Bildlaufleistenstil mit den Browsern IE8 und Chrome kompatibel?

CSS-Tutorial

Als ich kürzlich meine Website verbesserte, stellte ich versehentlich fest, dass beim Klicken auf verschiedene Spalten in der Navigation der Text auf der Webseite nach links und rechts blinkte (driftete). Nach sorgfältiger Prüfung und Überlegung wurde festgestellt, dass das Problem in der Bildlaufleiste auf der rechten Seite des Browsers liegt, d. h. wenn die Höhe des Webseiteninhalts weniger als einen Bildschirm beträgt, gibt es auf der rechten Seite keine Bildlaufleiste Die berechnete Bildschirmbreite sollte zu diesem Zeitpunkt der Breite des gesamten Monitors entsprechen (angenommen 1440). Wenn die Höhe des Webseiteninhalts einen Bildschirm überschreitet, sollte die berechnete Bildschirmbreite 1440 betragen Aus diesem Grund kommt es zu einem leichten Zittern auf der Webseite, wenn Sie „marge: 0 auto“ einstellen und zwischen Kurz- und Langbildschirm wechseln.

Aufgrund des oben genannten Problems habe ich darüber nachgedacht, wie ich es lösen kann, bin aber nach ständigen Versuchen schließlich zu dem Schluss gekommen, dass dieses Problem grundsätzlich nicht vollständig gelöst werden kann, da es auch von der Leistung verschiedener Browser abhängt. Testen Sie die drei Browser IE8, Sogou und Chrome. Wie wir alle wissen, verfügt die neueste Version des Sogou-Browsers über zwei Modi: Kompatibilität (IE-Kern) und Hochgeschwindigkeitsmodus (WebKit-Kern). ist bereits mit Chrome vergleichbar (oder ich habe den Unterschied noch nicht gesehen), aber das Merkwürdige ist, dass es sich im Kompatibilitätsmodus, obwohl es aufgerufen wird, anders verhält als der reine IE8 Seiten (nicht genug für einen Bildschirm) ), obwohl Sogou keine Bildlaufleisten anzeigt, reserviert es auf der rechten Seite des Bildschirms eine leere Breite für Bildlaufleisten. Das heißt, für den Sogou-Kompatibilitätsmodus, unabhängig vom kurzen Bildschirm oder Bei einem langen Bildschirm beträgt die berechnete Breite immer 1440-Bildlaufleistenbreite. Dies ist jedoch bei IE8 nicht der Fall. Die reservierte alternative Breite der Bildlaufleiste wird nicht angezeigt, wenn der Bildschirm kurz ist, und die Breite wird automatisch hinzugefügt Der Bildschirm ist genauso lang wie die Leistung von Chrome, was unglaublich ist! Derzeit gibt es so viele Arten von Browsern auf dem Markt, dass es unmöglich ist, sie mit allen kompatibel zu machen, daher habe ich vor, auf Anpassungen in diesem Bereich zu verzichten.

Obwohl das Problem nicht gelöst wurde, wurde die Bildlaufleiste endlich ein wenig verschönert und stimmte im Wesentlichen mit der Farbe der Seite überein. Der CSS-Stil der Bildlaufleiste war im IE schon immer sehr gut, aber Chrome hat ein Auge zugedrückt. Ich habe viele Informationen im Internet konsultiert und in großen Foren herumgewandert. Grundsätzlich wurde gesagt, dass die Bildlaufleiste von Chrome nicht sein kann Mit CSS implementiert. Am Ende ist es einfach, JS oder Bilder zum Simulieren usw. zu verwenden, aber am Ende gibt es Artikel, die kompatible Codes bereitstellen. Überraschenderweise kann die Breite der Bildlaufleiste von Chrome durch Code festgelegt werden. Ich habe es ausprobiert und es fühlte sich gut an, also habe ich es aufgezeichnet (mit Kommentaren, der Farbcode kann je nach Bedarf geändert werden):
Für IE8:

html,body {
scrollbar-face-color:#FB4446; /*滚动条3D表面（ThreedFace）的颜色*/ 
scrollbar-highlight-color:#fff; /*滚动条3D界面的亮边（ThreedHighlight）颜色*/ 
scrollbar-shadow-color:#eeeeee; /*滚动条3D界面的暗边（ThreedShadow）颜色*/ 
scrollbar-3dlight-color:#eeeeee; /*滚动条亮边框颜色*/ 
scrollbar-arrow-color:#000; /*滚动条方向箭头的颜色 */ 
scrollbar-track-color:#fff; /*滚动条的拖动区域(TrackBar)颜色*/
scrollbar-darkshadow-color:#fff; /*滚动条暗边框（ThreedDarkShadow）颜色*/ }

Für Chrome:

/*---滚动条默认显示样式--*/  
::-webkit-scrollbar-thumb{  
   background-color:#FB4446;  
   height:50px;  
   outline-offset:-2px;  
   outline:2px solid #fff;  
   -webkit-border-radius:4px;  
   border: 2px solid #fff;  
}  
/*---鼠标点击滚动条显示样式--*/  
::-webkit-scrollbar-thumb:hover{  
   background-color:#F01360;  
   height:50px;  
   -webkit-border-radius:4px;  
}  
/*---滚动条大小--*/  
::-webkit-scrollbar{  
   width:8px;  
   height:8px;  
}  
/*---滚动框背景样式--*/  
::-webkit-scrollbar-track-piece{  
   background-color:#fff;  
   -webkit-border-radius:0;  
}

Das obige ist der detaillierte Inhalt vonWie ist der CSS-Bildlaufleistenstil mit den Browsern IE8 und Chrome kompatibel?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!