Discussion sur l'extension de l'échange BUG_Experience à frontière flottante IE

Les amis qui connaissent le modèle de boîte CSS pensent que le BUG à double bordure flottante d'IE vous sera familier (si vous n'êtes pas très clair, vous pouvez cliquer dessus). Ce BUG ne sera généré que dans le premier élément flottant du flottant). rangée, donc si les premiers éléments flottants n'auront pas de double espacement sans utiliser de marge extérieure. Cependant, j'ai récemment découvert qu'IE possède une extension de ce BUG.

Problème
Dans l'exemple suivant, la marge extérieure du patch du premier élément flottant de la ligne flottante de tous les chiffres est 0

La marge gauche de #left2 est de 50px et s'affiche normalement

Lorsque la marge gauche de #left2 est de 100px, elle s'affiche normalement

Ensuite, nous augmentons la marge gauche de #left2 à 150px Cela commence à paraître un peu étrange

.

Nous modifions la largeur de #left1 à 110px, tandis que la marge gauche de #left2 continue de rester à 150px

En voyant le phénomène ci-dessus, nous avons découvert que IE a vraiment une personnalité. Comment cet homme à la personnalité se rend-il compte ? En fait, si l'on regarde bien, il n'est pas difficile de constater que lorsque la marge gauche de #left2 est inférieure ou égale à la largeur de #left, l'affichage est normal, mais dès qu'elle est supérieure à la largeur, des problèmes se produira. La distance réelle de la bordure gauche de #left2 est égale à #left1.width+(#left2.margin -left - #left1.width)*2
Solution
Pour résoudre ce BUG. est en fait très simple, tout comme la solution à double distance, définissez #left2 {display:inline} OK.
Résumé
La clé est pourquoi je viens de dire que c'est une extension du BUG, ​​car qu'il s'agisse d'un double BUG ou d'un BUG de ce mauvais algorithme, il n'apparaîtra qu'une seule fois . Peut-être que vous n'avez pas encore compris, alors dites ceci :

1. Si la marge gauche de #left1 est supérieure à 0, alors la bordure gauche de #left1 provoquera un BUG de double distance, ​​et la marge gauche de #left2 ne sera pas plus grande que la largeur de #left1. Quelque chose va mal se passer ;

2. Si la marge gauche de left1 est égale à 0 et que la marge gauche de #left2 est plus grande que la largeur de #left1, alors il y aura un bug dans le mauvais algorithme sur la gauche. bordure de #left2, et alors il y aura un #left3, même si c'est le cas. La marge gauche de #left3 est aussi grande que la largeur de #left2 et il n'y a pas d'erreur

3. Si la marge gauche de left1 et left2 sont toutes deux égales à 0, et alors il y a #left3, et la marge gauche de #left3 est supérieure à (la somme des largeurs de #left1 et #left2), puis #left3 Un BUG d'algorithme incorrect apparaît sur la bordure gauche. Sa bordure gauche réelle est (#left1.width+left2.width)+(#left3.margin-left-#left1.width-left2.width. )*2, puis celui après #left3 Tous les éléments flottants ne se tromperont pas

Ceux ci-dessus sont tous à gauche à titre d'exemple, la situation à droite est la même