본문 바로가기
CSS

CSS IE6 브라우저 버그 - 더블마진,3픽셀,문자중복,피커부

by 샷타이거 2009. 9. 10.

IE6 브라우저 버그들

IE6는 아직 많은 버그를 가진다.아래가 대표적인사례이며 해결방법을 보자

더블마진 플로트(float) 버그

플로트된 엘리먼트에 마진을 줄경우 두배가 나타난다. 아래와같이줄경우

#box{
	float:left;
	margin-left:20px;
	}

이와같이 할경우 IE6에서는 왼쪽으로 40px의 마진이 나타난다.해결방법으로는 display: inline;을 주면된다

#box{
	float:left;
	margin-left:20px;
        display: inline;/*IE6더블마진 해결*/
	}

텍스트 주변 3픽셀 공간 버그

플로트 지정한 엘리먼트 주변에 텍스트가 있을때 엘리먼트와 접촉부분에 3px의 공간이 생긴다.

해결방법으로는 텍스트에 height:1%;를 주는것이다.

#box{ 
    float:left;
    margin:0;}
p{
  height:1%;
  margin-left:0;
}

문자중복 버그

가끔 문자가 중복되어 박스를 넘어설때가 있다. 원인은 주석때문인데 처음두개까지는 이상없다가 이후 주석을 사용하면 중복되어표시된다.갸령 텍스트가 this is web site 라고 한다면 주석을 3번주면 te처럼 2개의 문자가 중복되고 4개사용하면 4개중복되고 5개 주석사용하면 6개문자가 중복된다.이건 연속해서 주석을 남발했을때 일어나는데 가급적 주석 사용을 줄이자

피커부(peek-a-boo) 버그

플로트가 지정된엘리먼트 플로트가 지정되지않은 엘리먼트 플로트를 해제하는 엘리먼트가 있을때 플롯이 지정되지않은 엘리먼트가 처음에 보이지않는다. 이경우는 엘리먼트에 크기를 지정하거나, line-height, position:relative 를 지정하면 해결된다.

기타 여러버그에 다음에 또소개하겠다. 아래는 보그관련 참조 사이트

IE css bugs

댓글