IE 플로팅 보더 확장 논의 BUG_체험교류

CSS 상자 모델에 익숙한 친구들은 IE 이중 부동 테두리 BUG가 익숙할 것이라고 믿습니다(잘 모르겠으면 클릭해도 됩니다). 이 BUG는 부동의 첫 번째 부동 요소에서만 생성됩니다. 행이므로 첫 번째 Floated 요소는 외부 여백을 사용하지 않고 이중 간격을 갖지 않습니다. 그러나 최근 IE에 이 BUG의 확장 기능이 있다는 사실을 발견했습니다.

문제
다음 예에서 모든 그림의 부동 행의 첫 번째 부동 요소 외부 패치 여백은 0입니다

#left2의 왼쪽 여백은 50px이며 정상적으로 표시됩니다.

#left2의 왼쪽 여백이 100px일 경우 정상적으로 표시됩니다.

그런 다음 #left2의 왼쪽 여백을 150px로 늘립니다.

#left1의 너비를 110px로 변경하고 #left2의 왼쪽 여백은 계속 150px로 유지합니다.

위의 현상을 보면 IE에 정말 성격이 있다는 것을 알 수 있습니다. 이 성격 남자는 어떻게 알아낼까요? 실제로 자세히 살펴보면 #left2의 margin-left가 #left의 너비보다 작거나 같으면 정상적으로 표시되지만 너비보다 커지면 문제가 발생한다는 것을 어렵지 않게 발견할 수 있습니다. #left2의 실제 왼쪽 테두리 거리는 #left1.width+(#left2.margin -left - #left1.width)*2
해결 방법
과 같습니다. 이중 거리 솔루션과 마찬가지로 실제로는 매우 간단합니다. #left2 {display:inline}을 설정하세요. OK.
요약
제가 방금 BUG의 확장이라고 말한 이유가 핵심인데, 이중 BUG인지, 이 잘못된 알고리즘의 BUG인지 한 번만 나타나기 때문입니다. . 아직 이해하지 못했을 수도 있습니다. 그렇다면 다음과 같이 말해보세요.

1. #left1의 왼쪽 여백이 0보다 큰 경우 #left1의 왼쪽 테두리는 이중 거리 BUG를 일으키고 #left2의 왼쪽 여백은 0보다 크지 않습니다. #left1의 너비가 잘못되었습니다.

2. left1의 margin-left가 0이고 #left2의 margin-left가 #left1의 너비보다 큰 경우 왼쪽의 잘못된 알고리즘에 버그가 있습니다. #left2의 테두리가 있고, 그 뒤에는 #left3이 있을 것입니다. #left3의 margin-left는 #left2의 너비만큼 크며 실수가 없습니다.

3. left1과 left2의 margin-left가 모두 0이고 #left3이 있고 #left3의 margin-left가 (#left1 너비의 합보다 큰 경우) 및 #left2), 그 다음 #left3 잘못된 알고리즘 BUG가 왼쪽 테두리에 나타납니다. 실제 왼쪽 테두리는 (#left1.width+left2.width)+(#left3.margin-left-#left1.width-left2.width입니다. )*2, 그리고 #left3 이후의 모든 부동 요소는 잘못되지 않습니다.

위는 모두 예시로 왼쪽이고, 오른쪽도 상황은 같습니다