Maison >interface Web >tutoriel CSS >Pourquoi les boutons collants ne fonctionnent-ils pas dans Internet Explorer 11 ?

Pourquoi les boutons collants ne fonctionnent-ils pas dans Internet Explorer 11 ?

Barbara Streisand
Barbara Streisandoriginal
2024-11-17 17:04:02707parcourir

Why Aren't Sticky Buttons Working in Internet Explorer 11?

Position : les boutons collants ne fonctionnent pas dans IE 11

Internet Explorer 11 (IE11) ne prend pas en charge la propriété de position « collante », qui Cela pose des problèmes en faisant en sorte que les boutons restent en bas de l'écran pendant que l'utilisateur fait défiler. Cet article explore pourquoi Sticky n'est pas fonctionnel dans IE11 et propose une solution de contournement pour obtenir le comportement souhaité.

Raison de l'échec de la position Sticky dans IE11

Positionnement Sticky, introduit dans CSS3, permet aux éléments de rester dans une position fixe lorsque la fenêtre défile mais dans les limites de leur élément conteneur. Cependant, IE11 ne prend pas entièrement en charge cette propriété, ce qui entraîne un comportement incohérent.

Solution de contournement : utilisation du positionnement fixe

Heureusement, nous pouvons utiliser la propriété de positionnement « fixe » comme une solution de contournement. Bien que fixe empêche les boutons de défiler dans le conteneur, il les positionne par rapport à la fenêtre, garantissant qu'ils restent en bas de l'écran.

CSS modifié :

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

Remarque : L'ajout de "position : fixe" prend en charge les anciens navigateurs, y compris IE11, sans compromettre les fonctionnalités des navigateurs modernes. navigateurs.

Points à considérer :

  • IE11 ne prend pas en charge le positionnement collant, mais le positionnement fixe peut être utilisé comme solution de contournement.
  • Le positionnement fixe positionne les éléments par rapport à la fenêtre, garantissant qu'ils restent en bas de l'écran comme prévu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn