Startseite>Webdesign-Tutorial>WEB-Standardisierung

Lassen Sie uns über die feste Positionierung von IE6 sprechen

Autor：Eve Cole Aktualisierungszeit：2025-02-06 17:32:26

Der IE6-Browser, der im Jahr 2002 weit verbreitet war und derzeit der Mainstream in meinem Land ist, unterstützt das CSS2-Attribut der festen Position nicht.

1. Die Lösung für reguläre JS

Dies ist die älteste und weit verbreitete. Der Nachteil ist, dass die Schlepper -Scroll -Elemente sehr schwierig sind. Es ist jedoch wichtig zu sagen, dass diese Lösung zwar einen wenig schlechten visuellen Effekt aufweist, die Stabilität jedoch nicht zu erwähnen ist.

2. Verwenden Sie die HTML -Struktur- und Layout -Simulationsmethode

Diese Lösung wurde einst mit 163 Blog angewendet. Zustand . Prinzip: Die Scrollbar, die Sie ziehen, ist nicht die gesamte Seite, sondern der Container, der die gesamte Seite simuliert, so dass der Ort außerhalb des Containers "noch" ist. detailliert:


Das Folgende ist der zitierte Inhalt:

<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<Styles>
*{Margin: 0}
Körper{
Höhe: 1000px;
Breite: 1000px;
}
#A{
Breite: 300px;
Höhe: 100px;
Hintergrund: Rot;
}
</style>
<Script>
var isie6 = window.xmlhttprequest? false: true;
window.onload = function () {
var a = document.getElementById ('a');
var d = document.getElementById ('d');
if (isie6) {
A.Style.position = 'absolut';

window.onscroll = function () {
D.Nerhtml = '';
}
}anders{
A.Style.Position = 'fixe';
}
A.Style.right = '0';
A.Style.bottom = '0';
}
</script>
</head>
<body>
<div id = "d" style = "display: keine;"> </div>
<div id = 'a'> test </div>
</body>
</html>


Hier ist der visuelle Effekt perfekt, es gibt drei Probleme:

1. müssen die HTML -Struktur ändern (dieses Element wird nicht erläutert)

2. Zerstören Sie die Benutzererfahrung: Ich habe diese Methode schon einmal ausprobiert, aber wenn ich die Seite aktualisiere, bleibt die Bildlaufleiste nicht dort, wo sie ist, was ich nicht tolerieren kann.

3. Zerstören Sie einige Ereignisse von JS.

3. Die beispiellose "Clearing -Methode" -Lösung für die Mars -Methode

Das Prinzip ist wirklich bizarr, ich kann es nicht erklären und die Anwendungsbeschränkungen sind zu groß. Siehe Beispiele:


Das Folgende ist der zitierte Inhalt:

<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<Styles>
*{Margin: 0}
Körper{
Höhe: 1000px;
Breite: 1000px;
}
#A{
Breite: 300px;
Höhe: 100px;
Hintergrund: Rot;
}
</style>
<Script>
var isie6 = window.xmlhttprequest? false: true;
window.onload = function () {
var a = document.getElementById ('a');
var d = document.getElementById ('d');
if (isie6) {
A.Style.position = 'absolut';

window.onscroll = function () {
D.Nerhtml = '';
}
}anders{
A.Style.Position = 'fixe';
}
A.Style.right = '0';
A.Style.bottom = '0';
}
</script>
</head>
<body>
<div id = "d" style = "display: keine;"> </div>
<div id = 'a'> test </div>
</body>
</html>


4. Neu verwendete Ausdruck und feste Hintergrundlösung für alte Technologie

Diese Lösung kann die statische Positionierung visuell perfekt realisieren. Beispiel:

CloudGamer: Alertbox Popup Layer (Informationsaufforderung Box) Effekt

Mein vorheriger: "Einfache Vollbildmaske -Maske (Lightbox) -Lösung"

Ähnliche Artikel