Double Margin Float Bug (IE6~7)

확실히 표준화 관련해서 작업을 하다보니 몇몇 버그를 만나기도 한다.
그중에서 IE6~7 까지 나타나는 버그로 CSS에서 Float 의 Margin이 두배로 잡히는 현상이다.
먼저 소스는 다음과 같다.

 
아주아주 간단한 소스;;ㅋ
다음은 IE6과 IE8 에서의 보여지는 화면이다.

 

위의 캡쳐를 보면 마진의 길이가 IE6에서 두배로 먹은것을 볼수 있다.(확실한 확인을 위해서 인터넷 정보창을 띄었다.)

 IE6는 float된 방향과 같은 방향의 margin이 설정되면 margin이 두배로 적용되는 버그가 발생한다.

해결 방법은 꼼수지만...;
dispaly:inline;를 넣어준다.

CSS에 display:lnline; 를 추가해주면 다음과 같이 정상적으로 나온다.

float 처리된 오브젝트는 display:block 상태가 된다.
이것을 inline로 풀어줘주는것.
일종의 꼼수라고도 할수 있는 버그 해결 방법.

근데 어짭히 inline로 할 것이면 text-align으로 주는게 정신 건강에 좋을듯 싶다;;

-_-이러면 그냥 해결되는데 말이지;ㅋ