À propos de la différence entre les attributs de marge DIV dans Chrome et IE

Cet article présente principalement la différence entre les attributs de marge DIV dans Chrome et IE. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Soudain, dans À quoi ressemble. une mise en page soignée sous Chrome se transforme en désordre sous IE. Afin d'en découvrir la raison, j'ai fait quelques tests et je les ai postés pour les partager avec tout le monde

Du coup, la mise en page qui avait l'air soignée sous Chrome s'est transformée en désordre sous IE. Pour savoir pourquoi, j'ai modifié la propriété background-color de p. Enfin, j'ai constaté que la largeur d'un même p est différente sous IE et Chrome. C'est tellement effrayant la nuit !
Après ça, j'ai fait un test. Quand :

p1 
{ 
width:960px; 
margin:0px; 
padding:0px; 
}

Pour le moment, il n'y a aucune différence entre les deux navigateurs ! La largeur totale est de 960px.
Cependant, lorsque :

p1 
{ 
width:960px; 
margin:0px; 
padding:0px 10px 0px 10px; 
}

À ce moment-là, Chrome cesse de fonctionner. Elle a en fait ajouté 20px de remplissage à l'extérieur, de sorte que la largeur totale de p1 soit de 960px+10px+10px=980px ; cependant, la largeur de p1 dans IE est toujours de 960px
D'après ma réflexion, je ressens ce rembourrage ; devrait être inclus en largeur, je ne m'attendais pas à ce que Chrome soit aussi têtu.
Après le test, la bordure est la même que le remplissage et la valeur de la marge est calculée en dehors de la « largeur ».
De plus, lorsque float n'est pas défini, Chrome traitera p1 comme position: absolue, tandis qu'IE le traitera comme position: relative. Par conséquent, essayez d'utiliser des éléments au niveau du bloc avec float défini à gauche !
C'est tellement triste. L'incompatibilité du navigateur me rend très malheureux, moi qui suis un profane !

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Implémentation de l'animation @keyframes en CSS3

Cliquez sur le bouton texte pour devenir une zone de saisie, cliquez sur Enregistrer Implémentation de la transformation en texte

Introduction à l'adaptation d'écran web mobile (rem)

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!