Maison >interface Web >tutoriel CSS >Pourquoi `overflow-x: Hidden` ne fonctionne-t-il pas sur `` et `` dans les navigateurs mobiles ?
Pourquoi `overflow-x: Hidden` ne fonctionne-t-il pas sur `` et `` dans les navigateurs mobiles ?
- Linda Hamiltonoriginal
- 2024-12-10 11:45:14599parcourir
Résoudre le contenu débordant dans les navigateurs mobiles malgré 'overflow-x:hidden'
Un utilisateur a rencontré un problème déroutant où l'application de 'overflow- x:hidden' aux éléments 'body' et 'html' ne parvient pas à empêcher le contenu de déborder au-delà de la zone visible sur mobile navigateurs.
Après examen, il est évident que les navigateurs mobiles semblent ignorer les attributs de débordement appliqués aux balises de niveau supérieur et ignorer les paramètres de fenêtre d'affichage définis dans le 'meta name="viewport" content="...". 'tag.
La solution réside dans l'établissement d'un élément de confinement au sein du 'corps' :
<body> <div>
En appliquant le 'overflow-x:hidden' au div 'wrapper' au lieu du 'body' ou 'html', le débordement est contraint à l'intérieur du wrapper, l'empêchant de s'étendre au-delà de la fenêtre d'affichage.
C'est crucial à noter que le div 'wrapper' peut nécessiter une propriété CSS supplémentaire :
#wrapper {
position: relative;
}
Ce style supplémentaire garantit un positionnement approprié du contenu dans le wrapper. En mettant en œuvre ces modifications, le contenu est correctement contenu dans la fenêtre d'affichage souhaitée, éliminant ainsi les espaces indésirables dans les navigateurs 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!