본문 바로가기

webdesign/CSS

IE 6 peek-a-boo bug

처음에는 텍스트가 보이지 않다가 페이지를 다시 로드하면 나타난다.
플로트가 지정되지 않은 엘리먼트 다음에 플로트가 지정된 엘리먼트가 나오고 그 다음 플로트를 해제하는 엘리먼트가 있을때 나타난다.
플로트를 해제하는 엘리먼트가 플로트된 엘리먼트와 접하게 되면 그 사이에 있는 플로트가 지정되지 않은 엘리먼트가 상위 엘리먼트의 배경색 뒤나 배경이미지 뒤로 사라져버리고 이 페이지를 다시 로드해야만 나타난다.

해결법

상위 엘리먼트의 배경색이나 배경이미지 제거

2. 플로트된 엘리먼트와 접하는 엘리먼트가 플로트를 해제하지 않도록 하는 방법

3. 컨테이너 엘리먼트에 크기값을 지정
line-height 를 지정

4. 플로트된 엘리먼트의 position 속성값을 지정하고 컨테이너에 relative를 지정

사용자 삽입 이미지

-------- 출처 : 에이콘 "CSS 마스터 전략"