Problèmes courants de compatibilité des navigateurs en HTML et CSS-tutoriel CSS-php.cn

Nous utiliserons certainement le CSS dans le développement HTML, mais parfois le développement n'est pas aussi fluide que nous le pensions. Par exemple, des problèmes courants de compatibilité des navigateurs en HTML et CSS, puis pour cette compatibilité de navigateur Dans cette section, nous allons vous apprendre comment. pour résoudre le problème.

1. Problème de centrage

Le contenu du div est centré par IE par défaut et aligné à gauche par FF par défaut. Vous pouvez essayer d'ajouter du code :

margin: 0 auto;

Copier après la connexion

2. Problème de hauteur

Pour deux divs disposés l'un au-dessus de l'autre ou imbriqués, la hauteur du div ci-dessus est définie. Si le contenu réel du div est supérieur à la hauteur définie, la hauteur du div situé au-dessus est définie. deux divs se chevaucheront dans FF ; mais dans IE, le div inférieur fera automatiquement de la place pour le div supérieur, donc afin d'éviter le chevauchement des couches, la hauteur doit être contrôlée de manière appropriée, ou vous pouvez simplement ne pas écrire la hauteur et la laisser. ajuster automatiquement. Une meilleure méthode est height: 100%; mais lorsque les éléments de premier niveau de ce div sont tous flottants, vous devez ajouter un div vide enfoncé à la fin du bloc div et avant la fermeture. :

float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}

Copier après la connexion

3. clear:both;

Si vous ne voulez pas être affecté par float, écrivez simplement clear:both;

4. Double distance générée par la marge flottante d'IE

01#box {
 float:left;
width:100px;
 margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}

Copier après la connexion

5. Problème de remplissage

Une fois que FF a défini le remplissage, le div augmentera la hauteur et la largeur, mais IE ne le fera pas (* la norme XHTML1.0 définit dtd Cela semble être cohérent) Le contrôle de la hauteur est approprié, ou essayez d'utiliser height:100%; la largeur est réduite et le remplissage est utilisé. Mais selon l'expérience réelle, il n'y en aura généralement pas. Il y a une grande différence entre le remplissage de FF et IE. La largeur réelle du div = largeur + rembourrage, donc le div est écrit Pleine largeur et rembourrage, la largeur est définie par la largeur réelle souhaitée moins le rembourrage.

6. Problèmes de remplissage et de marquage sur l'axe y lorsque les divs sont imbriqués

La distance entre le div enfant et le div parent sur l'axe y dans FF est le remplissage parent + la marge enfant

Dans IE, la distance entre le div enfant et le div parent sur l'axe y est la plus grande entre le remplissage parent et la marge enfant

Dans. FF, lorsque le padding parent = 0 et border = 0 sur l'axe y, le div enfant La distance jusqu'au div parent est de 0, et la marge enfant est appliquée à l'extérieur du div parent

7 . Solutions stupides pour le remplissage, la marge, la hauteur, la largeur

Notez qu'il s'agit d'une compétence, pas d'une méthode :

Écrivez l'en-tête standard

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=” 
高尽量用padding，慎用margin，height尽量补上100%，父级height有定值子级height不用100%，子级全为浮动时底部补个空clear:both的div宽尽量用margin，慎用padding，width算准实际要的减去padding

Copier après la connexion

. 8. Classe de liste

1. La balise ul a une valeur de remplissage par défaut dans FF, seule la marge a une valeur

Définissez d'abord ul {margin:0;padding:. 0;}

2. Éliminez l'indentation des listes ul, ol et autres lors de la saisie, le style doit être écrit comme : {list-style:none;margin:0px;padding:0px;}<🎜. >

9. Classe d'affichage (affichage : bloc, en ligne)

1. Display:block, inline deux éléments

display:block //Peut simuler; éléments en ligne comme éléments de bloc

display:inline; //Obtenir la même disposition des lignes L'effet de

display:table; //pour FF, simule l'effet du tableau

display:élément block block, les caractéristiques de l'élément sont :

toujours sur une nouvelle ligne Début ; la hauteur, la hauteur de la ligne et les marges supérieure et inférieure sont toutes contrôlables par défaut à 100 % de son conteneur, sauf si une largeur est définie

, < h1>,