Conseils de compatibilité CSS (IE et Firefox)

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, j'aurai rassemblé les conseils de compatibilité pour IE7, 6 et Fireofx sur Internet et les ai triés. 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, une instruction DOCTYPE doit être ajoutée.

Conseils CSS

1.Problème de centrage vertical de div

vertical-align:middle; Augmentez l'espacement des lignes à la même hauteur que l'ensemble du DIV line-height:200px; Insérez ensuite le texte et il sera centré verticalement. L'inconvénient est que vous devez contrôler le contenu et ne pas l'envelopper dans une autre ligne.

2. Le problème du doublement de la marge

La marge définie pour un div défini sur float sera doublée sous IE. Il s'agit d'un bug qui existe dans ie6. La solution est d'ajouter display:inline; à l'intérieur de ce div.

Par exemple:

<#div id="imfloat">
Le CSS correspondant est
#imfloat{
flotteur : 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 le flottement, c'est-à-dire

#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 en ligne) ;

#box{ display:block; //Vous pouvez simuler des éléments en ligne en tant qu'éléments de bloc display:inline; //Obtenir l'effet d'une disposition dans la même ligne diplay:table;

4 problèmes IE avec la largeur et la hauteur

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>corps #box{ largeur : auto ; hauteur : auto ; largeur minimale : 80 px ; hauteur min : 35 px ;}

5. 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 placer un