[버그리포트] FF3와 FF2의 float속성에 의한 차이점

지난 18일 여러가지 향상된 기능(자바스크립트의 구동속도 향상, 스마트 주소창, 피싱보호 기능 추가….)들을 갖추고 FF3의 정식버전이 릴리즈 되었습니다.

 아래는 float속성을 지닌 div의 하위에 float속성을 가진 div가 위치하였을 경우 FF3와 FF2의 차이점에 대하여 정리하였습니다.

<div style="float:left;border:1px solid red">

           <div style="float:left;width:100px;height:100px;background-color:Red"></div>

           <div style="float:right;width:100px;height:100px;background-color:blue"></div>

</div>

위의 소스를 보시면 parent의 div안에 child div가 양쪽 으로 float 속성을 가지며 놓여 있을 경우 parent부모의 표현이 FF2와 FF3에 차이점이 생겼더군요

아래와 같이 표현 되는 브라우저는 저희가 지원하고 있는 IE계열 모든 버전의 브라우저(5.5, 6.0, 7.0)와 FF2에서 아래와 같이 보여지게 됩니다.

그리고 아래와 같이 표현 되는 브라우저는 FF3와 Opera(test version 9.27), safari(test version 3.0.4)에서 아래와 같이 보여지고 있습니다.

FF2와는 달리 FF3에서는  parent div의 width를 auto로 인식하고 줄어 들어 보입니다.

위의 이슈는 parent div에 width값을 부여해 주시면 간단하게 FF2와 FF3의 View를 동일하게 맞출 수 있습니다.

그럼 즐거운 좋은 하루 되세요

출처 : 네이버 웹표준 블로그