Maison >interface Web >tutoriel CSS >Différences de remplissage et de marge entre les navigateurs_Experience Exchange
La marge et le remplissage peuvent toujours être utilisés, mais comment résoudre les problèmes causés ? Parce que les navigateurs interprètent les largeurs des conteneurs de différentes manières :
IE 6.0 Firefox Opera, etc. sont
real width=width+padding+border+margin
IE5.X
largeur réelle=largeur-padding-border-margin
La solution est :
div.content {
width:400px; //Ceci n'est pas la bonne largeur, tous les navigateurs le lisent
voice-family: ""}"" //IE5.X/win l'ignore Contenu après ""}""
voice-family:inherit;
width:300px //Certains navigateurs dont IE6/win lisent cette phrase et la nouvelle valeur (300px) l'écrase Ancienne
}
html> ;body .content { //html>body est écrit en CSS2
width:300px; //Les navigateurs prenant en charge CSS2 (pas IE5) ont la chance de lire cette phrase
}
div.content {
width:300px !important; //C'est la largeur correcte. La plupart des navigateurs qui prennent en charge la balise !important utilisent la valeur ici
width (space)/**/:400px ; //IE6/win n'analyse pas cette phrase, donc IE6/win pense toujours que la valeur de width est de 300 px ; pendant que IE5.X/win lit cette phrase, la nouvelle valeur (400 px) écrase l'ancienne à cause du !important tag Ça ne marche pas pour eux
}
html>body .content { //html>body est écrit en CSS2
width:300px //Les navigateurs qui supportent CSS2 ont la chance de lire cette phrase;
}