Raisons et solutions au mauvais alignement des pages Web HTML

Nous rencontrons souvent le besoin de définir la mise en page de la même ligne, mais elle est déplacée pour diverses raisons. J'ai résumé qu'il y a probablement deux raisons au désalignement de la mise en page des pages Web. Aujourd'hui, je vais vous donner une présentation détaillée. analyse des raisons et des solutions.

Souvent, nous rencontrons une disposition que nous souhaitons afficher dans une rangée, mais elle est mal alignée pour diverses raisons. Le résultat est que la disposition de la dernière case d'une rangée est mal alignée et tombe <.>

Il y a probablement deux raisons au mauvais alignement de la mise en page des pages Web DIV CSS. L'une est une erreur de calcul de la largeur et l'autre est causée par un BUG d'IE, en particulier IE6 et IE7. Ensuite, nous vous présenterons la luxation et les méthodes pour résoudre la luxation.

Solution à l'erreur de calcul de la largeur

Erreur de calcul de la largeur Si la largeur totale est de 500 px et qu'il y a 3 cases avec des largeurs CSS de 200 px, 200 px et 100 px respectivement, cela sera affiché dans une rangée. sans aucun problème. Il ne sera pas déplacé, mais si vous ajoutez les attributs CSS borders,

padding et margin, n'oubliez pas la largeur occupée par ces attributs. En particulier, n’ignorez pas l’espace de largeur occupé par le remplissage et les bordures. S'il y a une boîte avec des bordures gauche et droite ajoutées, il y a à ce moment une boîte dans laquelle la largeur est juste à droite et la largeur occupée par la bordure est réduite de 2 pixels. Sinon, la largeur totale des trois boîtes sera plus grande. que la largeur totale, provoquant un désalignement.

Résumé du désalignement de la mise en page CSS causé par des problèmes de largeur :

La somme des largeurs intérieures de la boîte est supérieure à la largeur extérieure, provoquant un désalignement. Lors de la vérification, nous devons calculer la somme de l'ensemble. largeur, bordure, paddind et marge.

BUG IE, ​​en particulier IE6 et IE7 provoquant un désalignement

Ce problème est le problème le plus courant. Nous avons vérifié le premier problème de largeur, et la largeur ne pose aucun problème pour le moment. dans IE6 et IE7 Misalignment, il n'y a pas de problème de désalignement dans IE8 et

autres navigateurs. À l'heure actuelle, nous devons déterminer si vous utilisez l'attribut margin. Habituellement, nous utilisons CSS float (. css float) L'utilisation de margin (margin-right margin-left en particulier cet attribut ici) produira des valeurs doubles. À ce stade, nous devons utiliser CSS hack pour résoudre ce problème. Laissez IE6 ou IE7 reconnaître seul le style de marge spécifié.

Par exemple :

1. IE6 est reconnu séparément (la marge gauche est mal alignée pour IE6 uniquement)

{margin-left:5px;_margin-left:2px}

À l'heure actuelle, d'autres navigateurs, à l'exception d'IE6, définissent margin-left:5px, et IE6 reconnaît _margin-left:2px séparément

2. ie6 et ie7 reconnaissent les autres versions et marques de navigateurs sans les distinguer)

{margin-left:5px;*margin-left:2px;}

À l'heure actuelle, à l'exception de IE6 et IE7, d'autres navigateurs Supposons que margin-left:5px, IE6 et IE7 reconnaissent *margin-left:2px

Je pense que vous maîtrisez la méthode après avoir lu ces cas, veuillez faire attention à php pour des choses plus excitantes D'autres articles connexes sur le site chinois !

Lecture connexe :

Comment convertir du HTML 2D et 3D

Explication détaillée de la différence entre HTML et Xhtml

Js découvre les moyens courants d'obtenir des styles

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!