Skip to content

글 수 47

IE 버그와 해결책들

Tip 조회 수 8098 추천 수 0 2013.07.03 15:15:21
l2zeo *.138.89.217

[출처] 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

해결

selector {
    min-height:500px;
    height:auto !important;
    height:500px;
}
 
4. 크기조정 이미지 뭉개짐
이것을 좋아하게 될것이다. IE에서 잘못된 이미지 크기조정이 괴롭히는가? IE와 다른 브라우저를 비교해본다면, IE의 이미지 크기조정은 다른 브라우저에 비해 허접하다.

해결

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.

해결

img {  
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);  
}
 
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.

해결

/* in the iframe element */  
<iframe src="content.html" allowTransparency="true">
</iframe>
/* in the iframe docuement, in this case content.html */  
body {  
    background-color:transparent;     
}
 
7. IE 기본 수직 Scroll bar 막기
기본적으로, IE는 내용크기가 적절해도 수직 스크롤바를 보인다. overflow:auto 를 써서 필요할때만 볼 수 있다.

해결

html {  
    overflow: auto;  
}
 
8. :hover Pseudo Class
IE 에서만 지원되는 anchor element에 대한 :hover pseudo class. jQuery hover event 를 통해 같은 효과를 낼 수 있다.

해결

/* jQuery Script */  
$('#list li').hover(  
    function () {  
        $(this).addClass('color');  
    },  
    function() {  
        $(this).removeClass('color');  
    }  
);  
/* CSS Style */  
.color {  
    background-color:#f00;    
}  
/* HTML */  
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</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 를 읽을 수 있다.

#content {  
    padding:10px;  
    border:1px solid;  
    width:200px;  
    w\\idth:180px;  
}
 
10. 2중 여백 버그수정
만약 왼쪽 또는 오른쪽 지정된 elements를 float 한다면, IE6 는 2배의 여백을 준다. 예를들어, margin-left:5px 이 10px 가 될수 있다. float된 element에 display:inline 을 추가하여 해결할 수 있다.

해결

div#content {
    float:left;
    width:200px;
    margin-left:10px;
    /* fix the double margin error */
    display:inline;
}

----------------------------------------------------



1. Layout 중앙 위치 시키기

아래 코드를 보세요:

    

  1. #container{
  2.   border: solid 1px #000;
  3.   background: #777;
  4.   width: 400px;
  5.   height: 160px;
  6.   margin: 30px 0 0 30px;
  7. }
  8. #element{
  9.   background: #95CFEF;
  10.   border: solid 1px #36F;
  11.   width: 300px;
  12.   height: 100px;
  13.   margin: 30px auto;
  14. }

당신이 예상한 화면은 아래죠

하지만 IE에서 실제로 아래와 같이 보여 집니다.:

이것은 주로 Quirks Mode IE6 그리고 지정해 준 margin 속성의 auto값을 인지 하지 못할 경우 발생합니다.

다행이도 이것은 쉽게 해결 됩니다.

해결

IE6의 content를 중앙 정렬 시키는 가장 신뢰하며 간단한 방법은 그 부모 요소에 text-align:center를 지정해주고 그 요소에 text-align:left를 지정해 주면 중앙 정렬 되고 그 내부의 text도 정렬 된 것을 확인 할 수 잇습니다.

    

  1. #container{
  2.   border: solid 1px #000;
  3.   background: #777;
  4.   width: 400px;
  5.   height: 160px;
  6.   margin: 30px 0 0 30px;
  7.   text-align: center;
  8. }
  9. #element{
  10.   background: #95CFEF;
  11.   border: solid 1px #36F;
  12.   width: 300px;
  13.   height: 100px;
  14.   margin: 30px 0;
  15.   text-align: left;
  16. }

계단 효과 (Staircase Effect)

대부분의 웹 개발자들은 Navigation을 생성할 때 list 를 사용합니다. 일반적으로, 링크가 안으로 들어갈 container element를 생성하고 당신이 원하는 방향으로 anchors를 float 합니다.

하지만 IE는 그것을 더 까다롭게 만들고 있습니다.

다음 코드를 보시죠

    

  1. <ul>
  2.   <li><a href="”#”></a></li>
  3.   <li><a href="”#”></a></li>
  4.   <li><a href="”#”></a></li>
  5. </ul>
    

  1. ul {
  2.   list-style: none;
  3. }
  4. ul li a {
  5.   display: block;
  6.   width: 130px;
  7.   height: 30px;
  8.   text-align: center;
  9.   color: #fff;
  10.   float: left;
  11.   background: #95CFEF;
  12.   border: solid 1px #36F;
  13.   margin: 30px 5px;
  14. }

표준을 준수하는 브라우저에서의 아래와 같이 보여집니다.

그리고 IE의 screen shot입니다.

별로 좋지 않네요. 다행이도 거기에는 2가지 수정 방법이 있습니다.

해결 #1

anchor elements 대신 li elements에 float 하는 것이 가장 간단한 방법입니다. 아래를 코드를 추가 하면 됩니다.

    

  1. ul li {
  2.   float: left;
  3. }

해결 #2

두번째 방법은 li elemets에 display:inlne을 같이 적용하는 것입니다. 이 방법은 계단 효과 버그 뿐 아니라 아래의 Double margin 버그도 해결 할 수 있습니다.

inline elemets 내부에 순수 block elemets는 배치되는 것은 좋지 않습니다.

    

  1. ul li {
  2.   display: inline
  3. }

float된 Elements에 Double margin 되는 현상 (Double Margin on Floated Elements)

이 버그는 아마도

그것은 float된 element와 flaat된 방향으로 margin이 지정되면 발생합니다. 그리고 짜잔~~~!!! 그 margin은 2배로 렌더링 될거예요

완벽한 pixel layout을 만들면서 볼 수 있을거예요

아래 코드를 보세요

    

  1. #element{
  2.   background: #95CFEF;
  3.   width: 300px;
  4.   height: 100px;
  5.   float: left;
  6.   margin: 30px 0 0 30px;
  7.   border: solid 1px #36F;
  8. }

표준을 준수하는 브라우저에선 아래와 같이 보입니다.

그러나 IE6에서는 아래와 같이 렌더링 합니다.

해결

이 특수한 버그의 해결 방법은 float된 element에 display:inlnie을 지정해 줍니다.

변경한 코드입니다.

    

  1. #element{
  2.   background: #95CFEF;
  3.   width: 300px;
  4.   height: 100px;
  5.   float: left;
  6.   margin: 30px 0 0 30px;
  7.   border: solid 1px #36F;
  8.   display: inline;
  9. }

내용이 없는 Elements와 작은 Height (Inability to Have Elements with Small Heights)

layout을 만들때 elements를 만들고 elements 많은 작은 높이나 border등이 필요합니다. 일반적으로 style로 height:XX 를 지정하죠. 아니면 당신의 방식 으로 지정합니다.

IE에서 page를 확인하면 아마도 다시 한번 확인 하게 될거예요

예를 들면 아래의 코드를 보세요~

    

  1. #element{
  2.   background: #95CFEF;
  3.   border: solid 1px #36F;
  4.   width: 300px;
  5.   height: 2px;
  6.   margin: 30px 0;
  7. }

그리고 출력은 아래와 같이 예상하게 될거예요 1px border와 2px의 높이를 가진 element

그리고 아래는 IE예요

해결 #1

이 버그의 원인은 아주 간단해요 IE에서는 element의 높이가 font의 크기 보다 작게 설정 되지 않기 때문이예요.

간단히 font의 크기를 0으로 설정하면 원하는 만큰 짧은 element를 만들 수 있습니다.

    

  1. #element{
  2.   background: #95CFEF;
  3.   border: solid 1px #36F;
  4.   width: 300px;
  5.   height: 2px;
  6.   margin: 30px 0;
  7.   font-size: 0;
  8. }

해결 #2

그 다음 좋은 방법은 이 버그가 발생하는 element에 overflow:hidden을 지정하면 설정한 높이데로 보일거예요.

    

  1. #element{
  2.   background: #95CFEF;
  3.   border: solid 1px #36F;
  4.   width: 300px;
  5.   height: 2px;
  6.   margin: 30px 0;
  7.   overflow: hidden
  8. }

position relative된 아이템과 overflow auto (Auto Overflow and Relatively Positioned Items)

그 position속성이 relative된 아이템은 부모 element의 경계와 overflow 외곽을 침범하게 됩니다.
    

  1. <div id=”element”><div id=”anotherelement”></div></div>
    

  1. #element{
  2.   background: #95CFEF;
  3.   border: solid 1px #36F;
  4.   width: 300px;
  5.   height: 150px;
  6.   margin: 30px 0;
  7.   overflow: auto;
  8. }
  9. #anotherelement{
  10.   background: #555;
  11.   width: 150px;
  12.   height: 175px;
  13.   position: relative;
  14.   margin: 30px;
  15. }

예상되는 출력은 아래와 같습니다.

그러나 IE는 아래와 같이 출력 됩니다.

해결

이 성가신 버그를 해결하기 위한 가장 쉬운 방법은 부모 element에 position relative를 지정하는 것입니다.

    

  1. #element{
  2.   background: #95CFEF;
  3.   border: solid 1px #36F;
  4.   width: 300px;
  5.   height: 150px;
  6.   margin: 30px 0;
  7.   overflow: auto;
  8.   position: relative;
  9. }

깨진 Box Model 고정하기 (Fixing the Broken Box Model)

Internet Explorer의 Box model의 오해는 아마도 용서할 수 없을 것 이다. IE6의 표준환모드에서는 발생되지 않지만 이 이슈는 아직 Quirks mode에서 확인 할 수 있습니다.

두개의 DIV element가 있습니다. 하나는 해결방법을 적용하고 나머지는 적용하지 않았습니다.

그 차이는 width와 height에 각 측면에 적용되 padding의 합계가 적용 되었다는 것입니다.

해결

그 트릭은 평상시에는 모든 표준 을 지원하는 브라우저 너비를 지정하고 IE5/6 에는 수정 너비를 지정 합니다.

아래 코드를 보세요

    

  1. #element{
  2.   width: 400px;
  3.   height: 150px;
  4.   padding: 50px;
  5. }

아래는 수정한 코드 입니다.

    

  1. #element {
  2.   width: 400px;
  3.   height: 150px;
  4.   \height: 250px;
  5.   \width: 500px
  6. }

본질적으로, IE6에서는 기본 width에 padding이 추가 됩니다. 해결법은 일반모드의 IE6에서는 문제가 없지만 Quirks mode의 IE6 에서는 지정해 주어야 합니다.

최소 width와 height 설정하기 (Setting a Minimum Width and Height)

픽셀이 완벽한 아름다운 디자인을 표현하고자 할때에는 element에 최소 높이를 반드시 지정하게 된다.

불행하게도, IE에서는 min-height 속성을 완벽하게 무시하는 대신 height를 최소 높이로 표현 됩니다.

해결 #1

Dustin Diaz는 아래의 해결법을 만들었습니다. 해결 방법은 !important 를 활용하는 것입니다.
아래의 코드 입니다.

    

  1. #element {
  2.   min-height:150px;
  3.   height:auto !important;
  4.   height:150px;
  5. }

해결 #2

두번째 방법은 IE에서 child selector 구문이 지정 되지 않는다는 점을 활용하는 것입니다.

    

  1. #element {
  2.   min-height: 150px;
  3.   height: 150px;
  4. }
  5. html>body #element {
  6.   height: auto;
  7. }

float 된 layout 깨지다 (Floated Layout Misbehaving)

한가지 중요한 개념은 element에 css의 float 를 사용하여 table없는 layout을 설계 하는 것입니다.

대부분의 경우 IE6에서 layout을 설계할 때 침착하게 진행할 수 있지만 어떤 경우에는 실수를 범할 수 있습니다.

부모의 너비를 초과하는 깨지지 않는 콘텐츠 또는 어느 element를 만나게 되면 layout이 붕괴 될 수 있습니다.

자 제가 보여 드릴게요~

    

  1. <div id=”container”>
  2.   <div id=”element”>http://net.tutsplus.com/</div>
  3.   <div id=”anotherelement”></div>
  4. </div>
    

  1. #element, #anotherelement{
  2.   background: #95CFEF;
  3.   border: solid 1px #36F;
  4.   width: 100px;
  5.   height: 150px;
  6.   margin: 30px;
  7.   padding: 10px;
  8.   float: left;
  9. }
  10. #container{
  11.   background: #C2DFEF;
  12.   border: solid 1px #36F;
  13.   width: 365px;
  14.   margin: 30px;
  15.   padding: 5px;
  16.   overflow: auto;
  17. }

표준을 준수하는 브라우저의 예상 출력 화면 입니다.

아래는 IE예요~

보는 것과 같이 첫번째 DIV는 콘텐츠에 맞춰 자기 자신을 확장하여 layout을 붕괴 시킵니다.

해결

이 버그를 위한 명쾌한 해결은 없습니다. Layout을 구하는 방법은 오직 그 Element에 overflow:hidden을 적용시키는 것입니다. 그러나 깨지지 않는 콘튼츠는 잘려 보이게 됩니다.

그 layout에 추가 내용을 넣지 않으면 문재를 해결할 수 있습니다.

    

  1. #element{
  2.   background: #C2DFEF;
  3.   border: solid 1px #36F;
  4.   width: 365px;
  5.   margin: 30px;
  6.   padding: 5px;
  7.   overflow: hidden;
  8. }

List 항목 사이의 공백 (Space Between List Items)

IE6에서는 특수한 경우에 수직 정렬을 추가 합니다.

자 아래 코드를 보시죠

    

  1. <ul>
  2.   <li><a href="”#”>Link 1</a></li>
  3.   <li><a href="”#”>Link 2</a></li>
  4.   <li><a href="”#”>Link 3</a></li>
  5. </ul>
    

  1. ul {
  2.   margin:0;
  3.   padding:0;
  4.   list-style:none;
  5. }
  6. li a {
  7.   background: #95CFEF;
  8.   display: block;
  9. }

자 그건 어떻게 보여져야 할까요?

IE는 어떻게 보여지나요?

다행이도, 이것은 많은 해결법이 있습니다.

해결 #1

가장 쉬운 방법은 A태그에 너비를 지정하는 것입니다. width선언은 IE의 특수한 hasLayout 속성을 발생 시킵니다. width대신 height을 지정하여 됩니다.

    

  1. li a {
  2.   background: #95CFEF;
  3.   display: block;
  4.   width: 200px;
  5. }

해결 #2

다음은 그냥 A태그를 float시키는 것입니다. 그리고 그것을 clear합니다.

    

  1. li a {
  2.   background: #95CFEF;
  3.   float: left;
  4.   clear: left;
  5. }

해결 #3

세번째는 li element에 display:inline 속성을 추가 하는 것입니다. 위에 설명한 것과 같이 이것은 double margin 버그도 해결 할 수 있습니다.

    

  1. li {
  2.   display: inline;
  3. }


이 게시물을
profile

I see no changes, wake up in the morning and I ask myself

Is life worth living should I blast myself

Things would never be the same.

엮인글 :
http://adminplay.com/213843/1fd/trackback
목록
List of Articles
번호 제목 글쓴이 날짜 조회 수
» Tip IE 버그와 해결책들 l2zeo 2013-07-03 8098
46 Tip IE css핵 (css hack)과 IE filter file [1] l2zeo 2013-07-03 14566
45 Tip 그누보드 패밀리사이트에서 회원가입연동 l2zeo 2013-05-31 5934
44 Tip robots.txt 관련 Tip. l2zeo 2013-05-30 9534
43 Tip jquery 관련 l2zeo 2013-05-26 6373
42 Tip Cascading Style Sheets (자바스크립트 style 객체) l2zeo 2013-04-25 6290
41 Tip 스토리보드 이제 쉬워졌어요~~ PowerMockUp 소개 해 봅니다.^^ file l2zeo 2013-03-18 6798
40 Tip 웹 서비스 구현시 캐시 구현을 남발해서는 안되는 이유? l2zeo 2013-03-18 6599
39 Tip 포인트가 마이너스일때 = 포인트 마이너스 회원들 포인트를 0으로 ... l2zeo 2013-03-15 9994
38 Tip 일정 포인트 이상은 적립안되게 하기 l2zeo 2013-03-15 5091
37 Tip CSS shorthand properties (단축 속성) [1] l2zeo 2013-02-26 5387
36 Tip 마우스 오버할때 아이디 안보이게 하기 file l2zeo 2013-02-03 5792
35 Tip 모바일에서도 이미지 리사이징 기능 적용하기 l2zeo 2013-01-24 54195
34 Tip 모바일에서 동영상 크기 지정해서 보여줄때. l2zeo 2013-01-24 6928
33 Tip 썸네일 생성이 되지 않을때 확인할것 file l2zeo 2013-01-24 7470
32 Tip Mini Help System with jQuery file [1] l2zeo 2013-01-23 5646
31 Tip CSS3 를 이용한 툴팁(Tooltip) 표시 [1] l2zeo 2013-01-23 6083
30 Tip [caching tip] js, css 캐싱 팁 l2zeo 2013-01-23 5369
29 Tip 페이스북 담벼락에 자동 게시하는 법 l2zeo 2013-01-23 9638
28 Tip [Lazy Load Plugin for jQuery] 효율적인 이미지 로딩 file l2zeo 2013-01-23 10245
목록
쓰기

Copyright ADMINPLAY corp. All rights reserved.

abcXYZ, 세종대왕,1234

abcXYZ, 세종대왕,1234