Maison  >  Article  >  interface Web  >  Différences de remplissage et de marge entre les navigateurs_Experience Exchange

Différences de remplissage et de marge entre les navigateurs_Experience Exchange

WBOY
WBOYoriginal
2016-05-16 12:09:081846parcourir

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;
}


Différences de remplissage et de marge entre les navigateurs_Experience ExchangePetit
Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn