Différences de prise en charge DIV entre IE6, IE7 et Firefox_Experience Exchange

1 styles CSS pour Firefox ie6 ie7

De nos jours, la plupart d'entre eux utilisent !important pour pirater. Pour les tests ie6 et Firefox, il peut être affiché normalement, mais ie7 peut interpréter correctement !important et le fera. Résultat, la page ne s'affiche pas comme souhaité ! J'ai trouvé un bon hack pour IE7 en utilisant "*+html". Maintenant, parcourez-le avec IE7 et il ne devrait y avoir aucun problème.

Maintenant, écrivez un CSS comme celui-ci :

#1 { color: #333 } /* Moz */
* html #1 { color: #666 } /* IE6; */
*+html #1 { color: #999; } /* IE7 */

Ensuite, la couleur de la police s'affiche comme #333 sous Firefox, #666 sous IE6 et #666 sous IE7 La couleur de la police apparaît comme #999.

2 Problèmes de centrage dans la mise en page CSS

Les principales définitions de style sont les suivantes :

body {TEXT-ALIGN: center;}
# center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

Explication :

Définissez d'abord TEXT-ALIGN : center dans l'élément parent ; est centré ; pour IE, ce paramètre est suffisant.

Mais il ne peut pas être centré dans Mozilla. La solution est d'ajouter "MARGIN-RIGHT: auto;MARGIN-LEFT: auto; " lors de la définition de la définition de l'élément enfant

Il est à noter que si vous souhaitez utiliser cette méthode pour centrer la page entière, il il est recommandé de ne pas l'envelopper dans un DIV. Vous pouvez diviser plusieurs divs en séquence, définissez simplement MARGIN-RIGHT: auto;MARGIN-LEFT: auto;

3 Différentes interprétations du modèle de boîte.

#box{
width:600px; //for ie6.0- width:500px;
//pour ff+ie6.0
}
#box{
width:600px!important
//pour ff
width:600px
//pour ff; +ie6 .0
width /**/:500px;
//pour ie6.0-
}


4 Double distance générée par l'image flottante
#box{ float:left; width:100px; margin:0 0 0 100px; //Dans ce cas, IE générera une distance de 200px display:inline; //Ignorer le float}

Parlons en détail des deux éléments block et inline. Les caractéristiques de l'élément Block sont : il commence toujours sur une nouvelle ligne, et la hauteur, la largeur, la hauteur de la ligne et les marges peuvent toutes être contrôlées (éléments block) ; les caractéristiques de l'élément Inline sont : et les autres éléments sont sur la même ligne,... ne peuvent pas être contrôlés (éléments en ligne

#box{ display:block; //Peut simuler les éléments en ligne sous forme d'affichage d'éléments de bloc) ; :inline; //Obtenir la même ligne L'effet de l'arrangement display:table


5 Problèmes avec IE et la largeur et la hauteur
IE ne reconnaît pas la définition de min-, mais en fait il met la largeur normale. Utilisez la hauteur et la hauteur comme s'il y avait min. C'est un gros problème. Si vous utilisez uniquement la largeur et la hauteur, ces deux valeurs ne changeront pas dans un navigateur normal. Si vous utilisez uniquement min-width et min-height, la largeur et la hauteur ne sont pas du tout définies. sous IE. Par exemple, si vous souhaitez définir une image de fond, cette largeur est plus importante. Pour résoudre ce problème, vous pouvez faire ceci :

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: 35px;}


6 La largeur minimale de la page
min-width est une commande CSS très pratique Elle peut spécifier la largeur minimale de l'élément. ne peut pas être inférieur à une certaine largeur, afin de garantir que la composition est toujours correcte. Mais IE ne le reconnaît pas et traite en fait la largeur comme la largeur minimale. Afin de faire fonctionner cette commande sur IE, vous pouvez mettre un
sous la balise