Quelque chose provoquant le défilement horizontal sur IE9 et Opera

Je développe la partie d'extrémité avant de ce site: http://oq.totaleclips.com Quelque chose provoquant le défilement horizontal sur IE9 et Opera

Quand je regarde l'une des annonces de films, comme http://oq.totaleclips.com/mpa/The_Hunger_Games_(Movie_2012), je reçois un défilement horizontal sur Opera et Internet Explorer 9. Si je place `body {overflow-x: hidden} dans mon CSS, j'obtiens un résultat attendu, mais Facebook Like est coupé quand un utilisateur appuie sur le bouton Like et est invité à commenter ... c'est va rendre plus difficile de "J'aime" sur Facebook.

S'agit-il d'un problème sur Facebook et d'un problème lié à Opera, ou les deux? Je ne peux pas trouver un élément DOM qui provoque le débordement, et je suppose que cela pourrait être le Facebook Like iFrame "réservant" l'espace à la droite du bouton Like, mais je ne veux pas le supposer. Le bouton Facebook ne semble même pas fonctionner dans Opera, mais c'est un problème secondaire.

Je développe en utilisant Firefox et Chrome, avec un accès limité à IE9, donc il était décevant de découvrir le défilement horizontal quand je l'ai regardé depuis un ordinateur Windows. Ensuite, pour voir que Opera fait la même chose, je peux difficilement être en colère contre IE9. Et, déplacer le bouton Facebook Like à gauche provoque une rupture de ligne indésirable entre le bouton Facebook et les boutons sociaux qui suivent.

Quelle est la cause du débordement/défilement horizontal, et comment puis-je découvrir des problèmes de ce genre par moi-même?

Modification de la spécificité: La barre de défilement horizontale, lorsque défilée à droite, affiche une colonne blanche à l'extrême droite de la disposition de l'écran. Cela disparaît lorsque la fenêtre du navigateur est redimensionnée horizontalement, mais n'apparaît pas dans le DOM. Les éléments sur la page à l'intérieur du corps ne sont pas vus à couler dans l'espace blanc sur la droite.

Source

2012-09-05 Smittles

Je ne peux pas trouver un élément DOM qui est à l'origine du débordement

Voici votre coupable:

.screener .content { 
    margin: auto; 
    width: 61em; 
}

Peut-être 61em sont juste un peu beaucoup ... en fonction de la taille de la police et la fenêtre disponible/largeur de tabulation.

Source

2012-09-05 18:32:24 CBroe

Je ne suis pas totalement convaincu. Si je réduis cette taille, le contenu s'effondre, ce qui me dit que la taille est parfaitement adaptée au contenu réel (joueur + barre latérale). De plus, il n'y a aucun élément DOM qui circule dans cet espace. Je m'attendrais à voir quelques débordements dans le côté droit blanc lorsque inspecté si la taille était vraiment le problème. Je m'attendrais aussi à ce que les marges soient remplies avec la couleur d'arrière-plan s'il n'y avait qu'un problème de largeur sur un certain div. Je suis toujours ouvert à travailler autour de cela, mais 61em n'est pas si large, n'est-ce pas? – Smittles

Donnez également à cet élément une bordure rouge vif, et vous verrez à quelle distance il s'étend. Mais ce n'est peut-être qu'une partie du problème, car vous avez superposé des éléments avec la classe '.content' entre eux, et ils sont tous affectés par cette règle dans votre feuille de style. Assurez-vous que vous ne ciblez que l'élément div.content le plus externe avec votre règle de définition de la largeur (et pas tous les éléments ayant la même classe à l'intérieur), alors cela devrait convenir. – CBroe

Vous avez raison! Mauvaise utilisation d'une convention de nommage. Merci! – Smittles

Quelque chose provoquant le défilement horizontal sur IE9 et Opera

Répondre

Questions connexes