Problèmes de compatibilité du navigateur CSS définis

La compatibilité du CSS avec les navigateurs donne parfois mal à la tête aux gens. Peut-être que lorsque vous comprendrez les techniques et les principes, ce ne sera pas difficile d'avoir rassemblé les méthodes de compatibilité d'IE7, 6 et Fireofx sur Internet et de les trier pour la transition. vers web2.0, veuillez essayer d'écrire du code au format xhtml, et DOCTYPE affecte le traitement CSS En tant que norme W3C, DOCTYPE doit être ajouté

Conseils CSS.

Problème de centrage vertical de 1.p

vertical-align:middle; Augmentez l'espacement des lignes à la même hauteur que l'ensemble p line-height:200px; Insérez ensuite le texte et il sera centré verticalement. L'inconvénient est que le contenu doit être contrôlé sans sauts de ligne

2. Le problème du doublement de la marge
 
Si p est défini sur float, la marge définie sous IE sera doublée. Il s'agit d'un bug qui existe dans ie6. La solution est d'ajouter display:inline
Par exemple :
Le CSS correspondant est
#JeFloat{ 
flotter:gauche
margin:5px;/*Sous IE, cela signifie 10px*/
display:inline;/*Sous IE, il sera compris comme 5px*/}


3. 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; Parlons en détail des deux éléments block et inline : la caractéristique de l'élément block est qu'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ément block la caractéristique) ; de l'élément en ligne est celui-là, et les autres éléments sont sur la même ligne et ne peuvent pas être contrôlés (éléments intégrés
); #box{ display:block; //Peut simuler des éléments en ligne en tant qu'éléments de bloc display:inline; //Obtenir l'effet de disposition dans la même ligne display:table


4 IE et width et height; Question
IE ne reconnaît pas la définition de min-, mais en fait, il traite la largeur et la hauteur normales comme s'il existait un 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 définies du tout. 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{ largeur : 80 px ; hauteur : 35 px ;}html>body #box{ width : auto ; hauteur : auto ; largeur minimale : 80 px; hauteur min : 35 px ;}


5. La largeur minimale de la page
  min-width est une commande CSS très pratique. Elle peut spécifier que la largeur minimale d'un élément ne peut pas être inférieure à une certaine largeur, afin que la disposition soit toujours correcte. Mais IE ne le reconnaît pas et traite en fait la largeur comme la largeur minimale. Afin de rendre cette commande également disponible sur IE, vous pouvez mettre un

sous la balise

, puis spécifier une classe pour p, puis concevoir le CSS comme ceci :
#container{ min-width: 600px; width:expression(document.body.clientWidth La première largeur minimale est normale ; mais la largeur de la deuxième ligne utilise Javascript, qui n'est reconnu que par IE, ce qui rendra également votre document HTML moins formel. Il implémente en fait la largeur minimale via le jugement Javascript.


6.p Le texte flottant d'IE produit un bug de 3 pixels
L'objet de gauche flotte et celui de droite est positionné en utilisant la marge gauche du patch extérieur. Le texte à l'intérieur de l'objet de droite aura un espacement de 3 pixels par rapport à la gauche
. #box{ float:gauche largeur:800px;}
#left{ float:gauche; largeur:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px; //Cette phrase est la clé}

7. Problème de cache-cache dans IE


Lorsque l'application p est complexe, il y a des liens dans chaque colonne, et le problème de cache-cache se produit facilement à 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.
8.fermeture flottante ; flotteur transparent ; hauteur adaptative ;


①Par exemple : NOTfloatC ici ne veut pas continuer à traduire, mais veut y aller en bas de la rangée. (Les attributs de floatA et floatB ont été définis sur float:left;)
Ce code fonctionne bien dans IE, le problème vient de FF. La raison en est que NOTfloatC n'est pas une étiquette flottante et que l'étiquette flottante doit être fermée. Ajoutez entre Il ne peut pas y avoir de relation imbriquée entre p frères et sœurs avec des attributs float, sinon une exception se produira. Et définissez le style clair comme suit : .clear{ clear:both;}

② En tant que wrapper externe p, ne définissez pas de hauteur fixe. Afin de permettre à la hauteur de s'adapter automatiquement, ajoutez overflow:hidden dans le wrapper lorsqu'il contient une boîte flottante, l'adaptation automatique de la hauteur n'est pas valide sous IE et IE devrait le faire. être déclenché à ce moment-là. L'attribut privé de mise en page (le maléfique IE !) peut être effectué en utilisant zoom:1 ;, obtenant ainsi la compatibilité.
Par exemple, un wrapper est défini comme suit :
.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}

③Pour la composition, la description CSS que nous utilisons le plus est probablement float:left. Parfois, nous devons créer un arrière-plan unifié derrière le float p dans la colonne n, par exemple :
.

Par exemple, nous souhaitons définir l'arrière-plan de la page sur bleu afin que la couleur d'arrière-plan des trois colonnes soit bleue. Cependant, nous constaterons que lorsque le centre gauche s'étend vers le bas, la page enregistre en fait la même hauteur. se pose. La raison est que la page n'est pas un attribut float et que notre page ne peut pas être définie pour flotter car elle doit être centrée, nous devrions donc la résoudre comme ceci

Intégrez ensuite un float à gauche et la largeur est de 100% p pour résoudre le problème

④Fermeture flottante universelle (très important !)
Pour le principe du clear float, veuillez vous référer à [Comment effacer les flotteurs sans balisage structurel]. Ajoutez le code suivant au Global CSS et ajoutez class="clearfix" au p qui doit être fermé.
/* Effacer le correctif */
.clearfix:after { content:"."; display:block height:0; .clearfix { display:inline-block; }
/* Masquer depuis IE Mac */
.clearfix {display:block;}
/* Fin du masquage depuis IE Mac */
/* fin de clearfix */
Ou définissez-le comme ceci : .hackbox{ display:table; //Affiche l'objet sous forme de table au niveau de l'élément de bloc}

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!