li 태그 스타일에 float:left 문제 고치기

<ul><li>태그를 쓰는 경우 <li> 리스트 내용을 가로로 혹은 붙여서 표시해야 되는경우에 스타일에 float:left 를 주는 경우가 있는데 이때 몇가지 문제가 발생한다. 이에 대한 해결책은?

1. FF 3, Opera 9 에서 생기는 문제

<ul> 레이아웃 스타일을 잡고 <li>에 float:left 스타일을 설정하면 원래 이런 모양을 기대한다.

원래 목표 형태

IE 계열(6,7버전)에서는 다음과 같이 나온다. 하지만 FF, Opera에서는 다음과 같이 나온다.

FF,Opera 문제 화면

보이는 것처럼 ul 높이가 없이 이상한 모양을 보여준다. 이때는 ul 태그에 overflow:auto나 overflow:hidden 스타일을 주면 고칠수 있다.

2. IE 6 문제

IE 7 이후로는 FF와 거의 비슷할 정도로 웹표준 혹은 호환성을 가지고 있다. 하지만 이전에 버전이 IE 6는 fix가 되어도 IE 6의 고질적인 문제들을 가지고 있다. 웹표준 안지키고 외국에서 다른 브라우저를 많이 쓴다고 신경 안 쓸 수도 있지만, Smashing Magazine에서는 여러 가지 Survey를 실시해 결과를 보여주기도 하는데 현재 그때보다 시간이 지났다 해도 세계 웹브라우저 40~50%는 여전히 IE 6가 쓰이고 있다고 예상된다. 심지어 집사람도; IE 6를 사용하고 있다. 이런 이유로 IE 6도 만족시켜야 하는 문제가 있다. 일단 overflow:auto를 쓰고 있는 상태에서 IE 6에서 생기는 문제를 보면

IE6 문제 화면

<ul> 태그가 가운데 자리하면서 이상한 곳에 위치하게 된다. 알아본 결과 IE 6 에서 해결하기 위해서 <ul> 태그에 zoom:1 이라는 스타일을 적용하면 해결된다. 정확히 무슨 속성인지 안써봐서 모르겠지만, 화면을 요소(폰트) 크기를 늘려주는것 같다. 언뜻 찾아보기로는 zoom의 디폴트 값이 1인데 MS IE 6는 inherit 하지 않아서 생기는 문제가 언급된다. 그리고 이 스타일은 FF,Opera에는 적용이 되지 않는 프로퍼티이다.