Warum funktionieren meine Sticky Buttons in IE 11 nicht?

Position: Sticky Buttons funktionieren in IE 11 nicht

Trotz der Fortschritte in der Webentwicklung können bestimmte Kompatibilitätsprobleme auftreten, wenn CSS-Funktionen in verschiedenen Browsern verwendet werden. In diesem Fall betrifft das Problem die Verwendung der Sticky-Position-Eigenschaft in Internet Explorer (IE) 11.

Problem:

Der bereitgestellte HTML-Code enthält ein Div mit dem Klasse „Sticky-Button-Thing-not-working-on-IE“, die Schaltflächen enthält. Das Ziel besteht darin, dieses Div klebrig zu machen und sicherzustellen, dass die Schaltflächen beim Scrollen des Benutzers am unteren Bildschirmrand fixiert bleiben. Dieses Verhalten tritt jedoch in IE 11 nicht auf.

Grund:

Die in modernen Browsern eingeführte Eigenschaft „Sticky Positioning“ ermöglicht es Elementen, währenddessen an ihrer aktuellen Position zu bleiben Scrollen, sodass Benutzer bequem auf wichtige Inhalte zugreifen können. Leider unterstützt IE 11 diese Eigenschaft nicht nativ.

Lösung:

Um das beabsichtigte Verhalten in IE 11 zu erreichen, besteht ein alternativer Ansatz darin, die Eigenschaft „Feste Position“ zu verwenden . Im Gegensatz zu Sticky-Elementen behalten feste Elemente unabhängig vom Scrollen eine konstante Position relativ zum Ansichtsfenster bei. Durch die Kombination von Fixed mit einigen anderen CSS-Anpassungen ist es möglich, das gewünschte Sticky-Verhalten zu emulieren und sicherzustellen, dass die Schaltflächen sowohl in IE 11 als auch in anderen modernen Browsern am unteren Bildschirmrand bleiben.

Geändert Code:

.sticky-button-thing-not-working-on-ie {
  position: fixed;                          /* added to support older browsers */
  position: sticky;
  bottom: 0;
  right: 0;
  background: rgba(0, 211, 211, 0.6);
}

Hinweis: Die Sticky-Eigenschaft kann sicher aus dem Code entfernt werden, da sie vorhanden ist nicht in der vorgesehenen Weise genutzt werden. Fixed hingegen stellt die gewünschte Funktionalität für ältere Browser bereit.

Zusätzliche Informationen:

• Edge-Browser ab Version 16 unterstützen die Sticky-Position-Eigenschaft .
• Diese Lösung behebt das spezifische Problem, dass Schaltflächen in IE 11 nicht am unteren Bildschirmrand fixiert bleiben, obwohl dies möglich ist Cross-Browser-Kompatibilität.

Das obige ist der detaillierte Inhalt vonWarum funktionieren meine Sticky Buttons in IE 11 nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!