10가지 섬뜩한 IE 버그와 해결책들

[출처] http://www.queness.com/post/683/10-awful-ie-bugs-and-fixes 

1. IE6 유령글 버그

Just before I wrote this article, I encountered this bug. It's so bizzare and hilarious. A piece of duplicated text came from nowhere and IE6 display it somewhere in the bottom near to the original text. I couldn't solve it, so I search for it, and BINGO, it's just another IE6 Bug.

There are quite a lot of solutions for it, but none of them work to me (I can't use some of the methods because of the complexity of the website.), so I used a really hacky method. Adding spaces next to the original text seems to solve the problem.

However, from a website called Hippy Tech Blog I found online. The reason behind it is due to the html comment tag. IE6 can't render it properly. The following is a list of solutions he suggested:

해결 

• comment 주변에 <!—[IF !IE]> 태그 사용.
• comment 제거
• preceding float 안에 {display:inline;} 스타일 추가
• 사용하고있는 div들에 –ve margin 사용.
• 원본글에 여분의 &nbsp; (10 공백같은) 추가 (핵스런 방법)

2. Position Relative 와 Overflow Hidden

I faced this problem a lot of times when preparing a jQuery tutorial, because I used overflow hidden a lot to make the desired layout.

It happens when the parent element overflow set to hidden and the child element is set to position:relative.

CSS-Trick 이 버그는 눈으로 확인가능한 좋은 사례가 있다. IE 에서 position:relative 와 overflow

해결

• 상위 element 에 position relative 추가.

3. IE를 위한 Min-Height

간단하다, IE 는 min-height 속성을 무시하고 다음과 같은 핵을써서 고치는게 가능하다. Credit to Dustin Diaz

This solution works like a charm in IE6, Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2

해결

1. selector {
2.     min-height:500px;
3.     height:auto !important;
4.     height:500px;
5. }

4. 크기조정 이미지 뭉개짐

이것을 좋아하게 될것이다. IE에서 잘못된 이미지 크기조정이 괴롭히는가? IE와 다른 브라우저를 비교해본다면, IE의 이미지 크기조정은 다른 브라우저에 비해 허접하다.

해결

1. img { -ms-interpolation-mode: bicubic; } 

5. PNG 투명

I guess everyone knows this, but I'm going to put it here anyway just for future reference :)

So if you want to use transparent image and GIF doesn't give you the quality you want, you will need this hack for PNG. You have to be aware, if you use a PNG as background, you will not able to set the background position.

해결

1. img {   
2.     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);   
3. } 

6. IFrame 투명 배경

In firefox and safari you shouldn't encounter this problem because by default, the iframe background is set to transparent, but in IE, it doesn't. You need to use allowTransparency attribute and put the following CSS code to achieve that.

해결

1. /* in the iframe element */   
2. <iframe src="content.html" allowTransparency="true">
3. </iframe>
6. /* in the iframe docuement, in this case content.html */   
7. body {   
8.     background-color:transparent;      
9. } 

7. IE 기본 수직 Scroll bar 막기

기본적으로, IE는 내용크기가 적절해도 수직 스크롤바를 보인다. overflow:auto 를 써서 필요할때만 볼 수 있다.

해결

1. html {   
2.     overflow: auto;   
3. } 

 
8. :hover Pseudo Class

IE 에서만 지원되는 anchor element에 대한 :hover pseudo class. jQuery hover event 를 통해 같은 효과를 낼 수 있다.

해결

1. /* jQuery Script */   
2. $('#list li').hover(   
4.     function () {   
5.         $(this).addClass('color');   
6.     },   
8.     function() {   
9.         $(this).removeClass('color');   
10.     }   
11. );   
14. /* CSS Style */   
15. .color {   
16.     background-color:#f00;     
17. }   
19. /* HTML */   
20. <ul id="list">
21. <li>Item 1</li>
22. <li>Item 2</li>
23. <li>Item 3</li>
24. </ul>

9. Box Hack Model

This is the hottest bug in IE. The basic understanding is that IE calculates width differently. Based on w3c standard, total width of an element should be

• total width = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

However, Internet Explorer calculates it without adding paddings and borders:

• total width = margin-left + width + margin-right

좀더 보자면, please check out this link: Internet Explorer and the CSS box model Detailed Explanation Solution

• Use the w3c use standards compliant mode. IE6 or later will calculate the width based on w3c standard, however, you will still having problem for IE5

또는, 이 문제 해결을 위해 CSS Hack 을 쓸수 있다. IE5를 제외한 모든 표준 호환 브라우저들은 w\\dth:180px 를 읽을 수 있다.

1. #content {   
2.     padding:10px;   
3.     border:1px solid;   
4.     width:200px;   
5.     w\\idth:180px;   
6. } 

10. 2중 여백 버그수정

만약 왼쪽 또는 오른쪽 지정된 elements를 float 한다면, IE6 는 2배의 여백을 준다. 예를들어, margin-left:5px 이 10px 가 될수 있다. float된 element에 display:inline 을 추가하여 해결할 수 있다.

해결

1. div#content {
2.     float:left;
3.     width:200px;
4.     margin-left:10px;
6.     /* fix the double margin error */
7.     display:inline;
8. }