IE6의 부동에 의한 3픽셀 BUG 정보

 
이전에 프런트엔드 코드를 쓸 때, IE 아래에 항상 여러 가지 엉뚱한 문제가 발생했다. 예를 들어 한 줄과 두 줄의 레이아웃이 다른 브라우저 아래에서 정상적이지만, IE 아래에서 두 열의 위아래가 틀린 것을 확실히 발견했다.오늘 IE 의 3픽셀 문제를 요약하고 나중에 문제가 발생하면 다시 업데이트합니다.
1. 버그 설명
IE 아래 두 개의 인접한div 사이에 세 개의 픽셀 버그가 나타납니다. 이 버그는 그 중 하나의div에float를 사용하고 다른 하나는 사용하지 않을 때 나타납니다.
left
right
　　

<div style="margin: 0 auto; background-color: #ccc;">
    <div style="width: 200px; height: 100px; float: left; background-color: #95f49e;">left</div>
    <div style="background-color: #fff; height: 100px; border: 1px solid #ccc;">right</div>
</div>

위의 코드가 IE6에서 낮게 실행될 때 right 앞에 3px의 빈칸이 나타납니다.
해결 방법: a. 다른 원소에 대해float를 동시에 사용한다.b. 이미 떠다니는 div에 문장을 추가합니다:margin-right:-3px;
부동 요소가 비부동 요소와 인접하면 이 3픽셀의 버그가 나타나고 3픽셀을 오프셋합니다.IE의 hasLayout을 터치하면 비부동 요소가 레이아웃을 가지게 됩니다.따라서 IE6 특유의 hack 규칙을 이용하여 단독으로 스타일을 쓰면 이 문제를 복구할 수 있습니다:zoom:1;margin-left:0;_margin-left:-3px;줌은 IE가 Layout을 트리거하는 조건 중 하나로, IE 특유의 CSS 규칙이기 때문에 줌을 사용한다.margin-left: -3px는 IE6에서 3px를 복구하는 버그입니다.이전에 비부동 원소도 부동하는 방법으로 버그를 복구하였는데, 지금은 이 새로운 방법을 시험해 볼 수 있습니다!주: 앞의 밑줄은 IE7 다음 버전에 대한 hack입니다!