크로스 브라우징 할때의 브라우저별 버그들

float의 방향과 같은쪽으로 margin을 주면 ie6에서는 더블마진이 발생한다. – 아예 다른방향으로 마진을 주는게 정답이지만..해결방법은 float부분에 display:inline;을 쓴다.

1. ie6에서 position:relative;가 홀수일때 absolute한 놈의 마지막 가장자리 1px이 늘어난다. – relative를 짝수로 쓴다 =ㅁ=;
2. ie6의 문자 중복 버그. 연속으로 float된 놈 사이에 display:none;이나 input type=”hidden”이나 주석 등이 포함 되면 문자의 끝부분이 반복되는 버그. – 숨겨진놈 전의 float부분에 display:inline;을 쓴다.
3. ie는 haslayout이라는걸 갖는다. – 항상해제하는 법을 기르자! 해제하는 법은 하단에 기술 하겠다. ie6~7에서 특정 요소가 안보인다거나 의도한대로 표현이 안된다면 *zoom:1을 추가 해보고 그래도 안되면 position:relative를 추가해보자
4. ie6에서는 다중선택자가 지원이 안된다. 무슨말인고 하니 한개의 엘리먼트에 class가 두개이상(다중선택자의 마지막 class만 적용)라던가 id랑 class가 겹쳤다거나 할때(첫번째 조합만 처리함)다. – 애초에 겹치지 않게 코딩
5. ie6~7에서는 button,input에 가변적인 텍스트를 넣었을때 좌우 패딩이 늘어나는 버그. – overflow:visible
6. ie6에서 png파일을 쓸때 투명부분이 표현 안된다. – 흔히 쓰는 방법으로 tmp:expression 로 스크립트 처리를 한다든지 DD_belatedPNG같은 다른 js를 쓴다든지 하면된다. 해당링크
7. ie6이하 에서는 숨은 이미지나 또는 흔히 사용하는 :hover으로 배경이미지를 바꾸면서 마우스오버 효과를 줄때 깜빡깜빡 거리면서 바뀌는걸 볼 수있다. 이건 캐시에서 불러오지 않고 서버측에 다시 요청하게 됨으로 생기는 버그다. – try {document.execCommand('BackgroundImageCache', false, true);} catch(e) {} 스크립트에 추가하면된다. 물론 ie전용이다. =ㅁ=;
8. 그리 많이 쓰진 않지만 firefox에서만 text-indent를 쓴 엘리먼트에 :before속성으로 내용을 넣으면 이 :before속성 자체에도 text-indent가 먹어버린다. 이 홈페이지 aside부분 작업하다가 발견했다.=ㅁ= – :before속성을 피해 상위엘리먼트나 하위엘리먼트에 text-indent를 넣어 동일하게 표현하자!