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

, puis spécifier une classe pour le div : Ensuite, le CSS est conçu comme ceci :

#container{
min-width: 600px;
width:expression(document.body.clientWidth
7 Effacer les flotteurs

.hackbox{
  display:table
//Afficher l'objet sous forme de table de niveau d'élément de bloc
}

ou

.hackbox{
clear:both
}

ou ajouter : after (pseudo-objet) pour définir le contenu qui apparaît après l'objet, Généralement utilisé avec le contenu, IE ne prend pas en charge ce pseudo-objet et n'est pas pris en charge par les navigateurs Ie, il n'affecte donc pas les navigateurs IE/WIN. C'est le plus gênant

......#box:after{
content: "."
display:
height: 0
clear : les deux ;
visibilité : cachée
}

Le texte IE flottant 8 DIV produit un bug de 3 pixels

L'objet de gauche flotte et celui de droite. side utilise un emplacement extérieur Positionné par la marge gauche du patch, le texte à l'intérieur de l'objet droit sera à 3 pixels de la gauche

#box{
float:left
width:800px;}
#left{
float:left;
width:50%;}
#right{
width:50%;
*html #left{
margin-right:- 3px;
//Cette phrase est la clé
}
Code HTML

9 Sélecteur d'attribut (ceci n'est pas considéré comme compatible, c'est un bug dans le masquage du CSS)
p[id]{}div [id]{}
p[id]{}div[id]{}

Ceci est masqué pour les versions inférieures à IE6.0 et IE6.0 et OPera fonctionnent toujours
Sélecteurs d'attribut et sous-sélecteurs Il y a une différence. La portée du sous-sélecteur est réduite dans la forme et la portée du sélecteur d'attribut est relativement grande. Par exemple, dans p[id], toutes les balises p avec id sont. le même style.


10 Problème de cache-cache IE

Lorsque l'application div est complexe et qu'il y a des liens dans chaque colonne, le cache-cache. Le problème de recherche de DIV est facile à survenir à ce moment-là. Certains contenus ne peuvent pas être affichés. Lorsque la souris sélectionne cette zone, on constate que le contenu est bien sur la page.
Solution : utilisez l'attribut line-height pour #layout ou utilisez une hauteur et une largeur fixes pour #layout. Gardez la structure de la page aussi simple que possible.


11 La hauteur n'est pas adaptée
La hauteur n'est pas adaptée lorsque la hauteur de l'objet intérieur change, la hauteur de la couche externe ne peut pas être automatiquement ajustée, surtout lorsque la l'objet intérieur est utilisé
Marge ou paddign. Exemple :



 

Contenu dans l'objet p

CSS :

#box {background- color :#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

Solution : Ajouter 2 espaces au-dessus et en dessous de l'objet P Le CSS code de l'objet div : .1{height:0px;overflow:hidden;} ou ajoutez l'attribut border au DIV.