Comment réparer le débordement : bug caché dans les éléments parent/enfant corrigés ?

Débordement : bug caché dans les éléments parent/enfant fixes

Lors de la définition du débordement : caché sur un élément parent fixe, tous les éléments enfants qu'il contient peut devenir visible en dehors de ses limites. Cela se produit en raison de la façon dont le positionnement fixe est géré dans la plupart des navigateurs.

Pour résoudre ce problème, vous pouvez utiliser la propriété CSS clip :

.parent {
  position: fixed;
  overflow: hidden;
  width: 300px;
  height: 300px;
  background: #555;
  clip: rect(0px, 300px, 300px, 0px); /* Clip the parent to its own dimensions */
}

En définissant la propriété clip sur le parent élément, vous définissez une zone rectangulaire qui limite la partie visible de l'élément et son enfants.

Considérations :

• Évitez d'utiliser un positionnement statique ou relatif pour l'élément parent. Pensez à utiliser un parent positionné de manière absolue dans un conteneur positionné de manière relative.
• Les pourcentages ne sont pas pris en charge pour les coordonnées de clip. Utilisez auto pour représenter 100 %.
• Le positionnement des éléments enfants et les transformations CSS3 (par exemple, l'échelle) peuvent être limités dans certains navigateurs (par exemple, IE11 et Chrome34).

Pour améliorer la compatibilité , pensez à ajouter les styles suivants à l'élément enfant :

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

Navigateur Compatibilité :

• IE8 : Menu affiché mais les liens ne sont pas cliquables
• IE9 : Menu non visible s'il est partiellement sous le pli
• iOS Safari <5 : Le menu ne s'affiche pas correctement
• iOS Safari 5 : Le contenu coupé peut être repeint sur scroll
• FF (13 ), IE10 , Chrome, Chrome pour Android : se comportent généralement comme prévu

Notez que cette approche peut ne pas être entièrement prise en charge par les navigateurs plus anciens ou mobiles.

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!