Parmi les diverses drôle "interprétations" que Internet Explorer 6 peut faire avec HTML / CSS, celui de la «double marge» est certainement la plus fastidieuse et souvent. En pratique (bravo ...) Bonne navigateur de Microsoft peut - mystérieusement - à doubler les marges sur les articles qui sont mis à flotter! : En tant que tel le CSS suivante appliquée à une div avec l'id box :
1 | display : block ; width : 100px ; height : 100px ; margin-left : 100px ; float : left } div # box {display: block; width: 100px; height: 100px; margin-left: 100px; float: left} |
Vous obtenez:
Où n est la marge de gauche de notre 100px! si trova a diretto contatto con il suo contenitore. Ce défaut, heureusement, ne survient que dans certaines circonstances, c'est à dire lorsque la marge coïncide avec la direction du float et quand notre div#box est en contact direct avec son récipient. precedente. Cela signifie qu'un montant supplémentaire de div#box sur la même ligne ne souffre pas à cause du problème est sur la gauche, mais pas le conteneur div#box ci-dessus. Évidemment, le problème n'est pas spécifique à la marge gauche, mais il spéculaires inverser la chose aurait le même problème avec la marge de droite!
Solution
La solution est très simple: il suffit d'insérer la déclaration display:inline dans notre CSS, et le défaut disparaît:
1 2 | display : block ; width : 100px ; height : 100px ; margin-left : 100px ; float : left ; div # box {display: block; width: 100px; height: 100px; margin-left: 100px; float: left; inline } display: inline} |
L'introduction de display:inline sera ignoré par tous les autres navigateurs, et non pas parce que nous sommes particulièrement chanceux, mais plutôt par spécifiques du W3C :
... Le 'display' est ignoré, le moins qu'il n'ait "aucun" de la valeur.
Je ne comprenais pas une chose:
dans la définition de classe doit être présent à la fois sur display: block au display: inline. ?
ne laissant que le second a le même défaut?
Merci
@ Maurice:
Le
display:blockvous pouvez le remplacer pardisplay:inlineJe me souviens que l'un des premier bug à laquelle j'ai été confronté avec IE6.
)
Au moins dans ce cas la solution est moins dans l'immédiat (à condition que vous savez
[...] Nous explique simplement comment éliminer le problème de la double marge dans IE6, le fléau de l'Internet [...]
Êtes-vous un grand, tu ferais un monument! Clair, simple et rapide! Great post
Vous êtes un grand! il fonctionne très bien. maintenant mes boutons sont vu qu'une fois. La commande "display: inline" aborde une multitude de problèmes dans IE.