À propos de la mise en page centrée et de la double marge IE bug_CSS/HTML

Aujourd'hui, j'ai recherché sur Google le problème de la mise en page centrée sur CSS, et les résultats citent presque tous le même article. Pour centrer dans IE, définissez simplement l'attribut text-align:center; dans l'élément Dans Firefox, un wrapper doit être défini. Spécifiez ensuite les propriétés margin-left:auto;margin-right:auto; pour centrer le bloc dans Firefox. En fait, j'utilise moi-même l'attribut margin, qui est l'abréviation de margin:auto;, pour définir le centre. L'attribut d'abréviation margin définit les marges de la page dans quatre directions dans le sens des aiguilles d'une montre : haut, droite, bas et gauche. Il convient de noter que si vous pensez sur cette base que vous souhaitez simplement centrer le bloc après avoir défini l'attribut margin-top:auto, alors vous vous trompez. Lors de l'utilisation de cette méthode, les attributs margin-left:auto;margin-right:auto; doivent être définis en même temps pour être centrés. Cependant, vous pouvez également le centrer en définissant margin: 0 auto;.
Une autre façon de centrer est d'utiliser la combinaison de gauche : 50 % + marge gauche : -375 px en partant du principe d'utiliser un positionnement absolu. Les deux méthodes de centrage sont les suivantes.

Copier le code Le code est le suivant :

/* Méthode 1*/
body {
background: #00FF7F;
text-align: center; /* hack pour ie center alignlayout */
}
#wrapper{
background: Aqua
width : 750px;
margin:auto; /* ou margin-left:auto;margin-right:auto;*/
}
/* Méthode 2 */
#wrapper2 {
position : absolu ;
largeur : 750 px ;
gauche : 50 % ;
marge-gauche : -375px ; Personnellement, j'utilise toujours la première méthode pour le centrer, car j'estime que les blocs de la deuxième méthode n'ont pas la rigidité nécessaire et que le code n'est pas facile à comprendre. Si vous réduisez le formulaire de la méthode 2 à une certaine limite, vous verrez que la mise en page entière sera fluide. Bien sûr, certaines personnes souhaitent cet effet. :), un autre avantage de la méthode 2 est qu'il n'est pas nécessaire de remplacer le paramètre text-align: center; de l'élément body dans d'autres blocs imbriqués, car la plupart du texte sera toujours aligné à gauche. Cela peut réduire la redondance dans une certaine mesure. Mais je pense que cet avantage est négligeable. Bref, chacun prend ce dont il a besoin selon ses préférences.

L'autre est le bug de double marge d'IE. La solution est d'ajouter le paramètre display:inline; En fait, ce bug d’erreur d’analyse affectera de nombreux aspects. Si vous rencontrez un espacement anormal dans la mise en page CSS dans IE, vous pouvez essayer d'ajouter la déclaration d'attribut display:inline;. Et pour certains problèmes de mise en page spécifiques, vous devez utiliser display:block; et display:inline; en combinaison pour créer la mise en page souhaitée. J'ai rencontré un problème similaire dans un menu d'images contrôlé par une liste de désordre.

Dès que possible, divers navigateurs ont des bugs CSS, mais la méthode de mise en page CSS s'est développée à ce jour et est relativement mature. Le risque de vous rendre fou à cause des bugs n'est plus élevé. Si vous avez des questions, consultez le moteur de recherche pour résoudre la plupart de vos problèmes. Si vous pouvez faire quelques expériences pendant votre temps libre, vous pourrez peut-être rester calme en cas d'urgence.