Pourquoi mon navigateur mobile affiche-t-il un débordement de contenu même avec « overflow-x : caché

Pourquoi mon navigateur mobile affiche-t-il un débordement de contenu même avec « overflow-x : caché » sur le corps ?

Patricia Arquette

Libérer： 2024-12-14 14:26:15

original

674 Les gens l'ont consulté

Why Does My Mobile Browser Show Content Overflow Even with `overflow-x: hidden` on the Body?

Débordement de contenu dans les navigateurs mobiles avec "overflow-x:hidden"

Malgré le paramètre "overflow-x:hidden" pour l'élément body , les utilisateurs subissent un débordement de contenu dans les navigateurs mobiles. La barre de menu s'étend au-delà de la largeur de la page, laissant un espace vide à droite.

Résolution

Pour résoudre ce problème, créez un wrapper

à l'intérieur du élément et appliquez la propriété "overflow-x: Hidden" au wrapper. Cela masque efficacement le contenu excédentaire dans les navigateurs mobiles.

Il est important de noter que certains navigateurs peuvent ignorer les attributs de débordement appliqués au et balises lorsqu'une fenêtre d'affichage est spécifiée à l'aide de la balise "meta name='viewport'". Par conséquent, appliquer "overflow-x:hidden" directement à l'élément body peut ne pas être suffisant.

De plus, l'ajout de "position: relative" au wrapper

est recommandé pour garantir un affichage correct dans les navigateurs mobiles. En contenant le débordement dans le wrapper, la fenêtre d'affichage de 1 100 px est conservée et le contenu est effectivement coupé.

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

Article précédent：Comment puis-je optimiser l'utilisation de CSS « background-image » pour de meilleures performances et une meilleure compatibilité avec le navigateur ? Article suivant：Comment puis-je créer une ombre portée pour les images PNG irrégulières en CSS ?

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

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2187

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2334

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

1962

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...