Maison > interface Web > tutoriel CSS > Pourquoi « overflow-x : Hidden » ne fonctionne-t-il pas sur la barre de menus de mon mobile ?

Pourquoi « overflow-x : Hidden » ne fonctionne-t-il pas sur la barre de menus de mon mobile ?

DDD
Libérer: 2024-12-11 10:54:12
original
439 Les gens l'ont consulté

Why Isn't `overflow-x: hidden` Working on My Mobile Menu Bar?

Overflow-x:hidden ne fonctionne pas dans les navigateurs mobiles

Dans ce numéro, la barre de menu noire d'un site Web s'étend au-delà du bord de la fenêtre dans les navigateurs mobiles. navigateurs, malgré l'application de overflow-x:hidden au corps. Cet espace excessif est inexpliqué et apparemment externe à la structure HTML.

Solution :

Pour résoudre ce problème, l'auteur suggère d'encapsuler le contenu du site Web dans un div wrapper et en appliquant overflow-x:hidden au wrapper au lieu du corps ou du code HTML.

Apparemment, les navigateurs donnent la priorité à la méta de la fenêtre d'affichage. balisez et ignorez les attributs de débordement sur les éléments HTML et body. En plaçant l'attribut overflow dans le div wrapper, la contrainte est appliquée efficacement, limitant l'expansion du contenu. De plus, l'ajout de position: relative au div wrapper peut également être nécessaire.

Exemple :

<body>
  <div>
Copier après la connexion
#wrapper {
  overflow-x: hidden;
  position: relative;
}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal