1. IE6 유령 text 버그
예기치 않게 DIV에서 글자가 더 보이는 경우가 있다.
이 경우 대부분 주석의 문제이므로 주석을 없애면 유령 글자도 사라질 것이다.
또는 display:inline 적용으로 해결
2. DIV내 DIV height 가 적용되지 않을 때
내부 DIV에 position:relative 적용
ex) http://snook.ca/archives/html_and_css/position_relative_overflow_ie/
3. min-height 버그
왜 ie만 최소 height값이 안먹힐까....내부에서 구현을 안했나보지..하지만 방법은 있다!
01.selector {
02. min-height:500px;
03. height:auto !important;
04. height:500px;
05.}
4. 이미지 앤티앨리어싱
이미지 변환시 안티앨리어싱좀 해주지 저게 모니~
하지만 방법은 있다.!
img { -ms-interpolation-mode: bicubic; }
5. PNG 알파레이어 보이게
IE6는 PNG알파레이어를 인식못해 투명한 곳은 뿌옇게 나온다.
하지만
img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}
필터로 투명값 표시가능
6. IFrame 투명 백그라운드
IFrame에 넣을 HTML에거 추가해주자
/* 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 세로 스크롤바 없애기
기본설정으로 IE는 세로 스크롤바가 나와서 디자인에 옥의 티를 남긴다.
이렇게수정
html {
overflow: auto;
}
8. :hover class지원
Jquery를 이용하다 다른 element에서도 :hover를 사용해보자!
ex)
/* 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 모델 문제
원래 width는 다음과 같이 계산한다.
total width = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
하지만 IE는 box를 다음과 같이 계산한다.
total width = margin-left + width + margin-right
즉 width에 padding과 border가 모두 포함되어 있다
가끔 생각해보면 IE방식의 width가 레이아웃 잡고 코딩 하기엔 나이스하지만
W3C권고는 그게 아니므로 표준을 따라가야 한다.
대부분이 이 박스모델 문제에서 발생된다. 핵을 이용해보자
ex)
#content {
padding:10px;
border:1px solid;
width:200px;
width:180px;
}
10. Doubled Float-Margin Bug
버전: IE6
문제: float 요소에 margin을 적용했을 경우, margin이 이중으로 표현되는 문제
해결: float 요소에 display:inline 적용
참고: http://positioniseverything.net/explorer/doubled-margin.html
——
11. Peekaboo Bug
버전: IE6, IE7
문제: float 요소 안의 내용이 나오지 않다가, 브라우저 창 크기를 조절하거나 스크롤했을때에만 가끔 내용이 나타나는 문제
해결: float 요소와 그 요소를 감싸는 요소 모두 적용
position: relative; /* IE6 bugfix */
min-width: 0; /* IE7 bugfix */
참고: http://positioniseverything.net/explorer/peekaboo.html
참고: http://www.brownbatterystudios.com/sixthings/2007/01/06/css-first-aid-for-ie-peekaboo-bug/
12. Duplicate Characters Bug
버전: IE6
문제: float 요소가 1개 이상 연속될때 마지막 float 요소의 문자 끝부분이 중복 출력되는 문제로, float 요소 내부에 <!– comment –>, <input type=”hidden” />, { display:none; } 와 같은 요소들이 포함되어있을때 발생.
해결: float 요소에 display:inline 적용
참고: http://positioniseverything.net/explorer/dup-characters.html
13. Expanding Box Problem
버전: IE6
문제: 레이아웃 요소의 크기를 지정했음에도 불구하고, 지정한 크기보다 큰 텍스트(띄어쓰기가 없는 긴 텍스트)를 포함할 경우 요소의 크기가 늘어나버리는 문제
해결: 해당 요소에 word-wrap:break-word; overflow: hidden; 적용
참고: http://positioniseverything.net/explorer/expandingboxbug.html
14. Guillotine Bug
버전: IE6, IE7
문제: float 요소의 하단이 잘리거나(IE6), float 요소를 포함하는 컨테이너 요소의 크기가 늘어나버리는(IE7) 문제
해결: float 요소를 포함하는 컨테이너 요소 바로 뒤에 clear해주는 요소를 삽입(예: <div style=”clear: both”></div>)
참고: http://positioniseverything.net/explorer/guillotine.html
15. IE6 Float Model Problem
버전: IE6
문제: float 요소 다음에 width가 선언되지 않은 non-floated 요소가 위치하면, 두 요소의 바운더리는 겹쳐야 한다. 하지만 non-floated 요소의 width가 선언되면, non-floated 요소가 float 요소 옆으로 나란히 위치하는 문제.
해결: 없다. 두 요소의 바운더리가 겹쳐져야 하는 상황을 아예 만들지 말거나, 꼭 겹쳐져야한다면 position을 사용하는 등의 다른 방법을 구사.
참고: http://positioniseverything.net/explorer/floatmodel.html
16. Three Pixel Text-Jog
버전: IE6
문제: float 요소 다음에 non-floated 요소가 위치하면, non-floated 요소의 텍스트가 3 pixel 밀리는 문제.
해결: float 요소에 {margin-right:-3px}, non-floated 요소에 {height:1%; margin-left:0} 적용
참고: http://positioniseverything.net/explorer/threepxtest.html
17. Inherited margins on form elements
버전: IE6, IE7
문제: form을 포함하는 컨테이너 요소에 margin이 적용되어있을때, 특정 input 요소들이 컨테이너의 margin을 상속받는 오류.
해결: input 요소 앞에 inline 요소를 삽입하거나, span, label 등의 컨테이너 요소로 input 요소를 감싼다.
참고: http://positioniseverything.net/explorer/inherited_margin.html
18. Line-height Bug
버전: IE6
문제: plain text 중간에 inline으로 img, input, textarea, select, object가 삽입되어있을 경우 line-height 제대로 표현하지 못하는(collapse됨) 문제.
해결: inline으로 삽입된 img, input… 요소의 상하 margin을 교정 (예: {margin:45px 0; vertical-align:middle;})
참고: http://positioniseverything.net/explorer/lineheightbug.html
19. Border Chaos
버전: IE6
상황: block 요소가 두개 있다. 두번째 요소의
문제: 연속되는 block 요소중 두번째 이후 요소들의 margin-top이 음수이고, border가 적용되어있을때, 나타나는 광란의 버그
해결: 연속되는 block 요소들의 컨테이너(parent)에 {position: relative;} 적용
참고: http://positioniseverything.net/explorer/border-chaos.html
20. Disappearing List-Background Bug
버전: IE6
문제: 리스트(ol, ul, dl)를 감싸는 div의 position이 relative이고 float되어있으며, 리스트요소(li, dt)에 background가 사라지는 문제(background를 적용했을때).
해결: 리스트요소(li, dt)에 {display:inline} 적용
참고: http://positioniseverything.net/explorer/ie-listbug.html
21. Unscrollable Content Bug
버전: IE6
문제: position이 relative이고 크기가 지정되지않은 컨테이너 요소가, position이 absolute이고 크기가 페이지보다 큰 컨텐츠를 포함하고 있다면 스크롤바가 나타나야 하지만 그렇지않은 문제.
해결: 컨테이너 요소에 {height:1%} 적용
참고: http://positioniseverything.net/explorer/unscrollable.html
22. Duplicate Indent Bug
버전: IE6
문제: float요소가 padding 또는 margin이 적용된 컨테이너에 위치하고 있다면, 이중으로 적용되는 문제.
해결: 경우의 수가 워낙 많지만, 대부분의 경우 {display:inline} 으로 해결 가능.
참고: http://positioniseverything.net/explorer/floatIndent.html
23. Escaping Floats Bug
버전: IE6
문제: 크기를 지정하지 않은 컨테이너가 float요소 여러개를 포함하고 있는데(clear 요소로 float 해제했음), 컨테이너 영역이 제대로 표현되지 못하는 문제.
해결: 컨테이너에 {height:1%} 적용
참고: http://positioniseverything.net/explorer/escape-floats.html
24. Creeping Text Bug
버전: IE6
문제: block요소가 또 다른 block요소를 포함하고 있고, border-left, padding-bottom이 적용되어있을때, 내부의 block요소가 1px씩 좌측으로 기어들어가는 문제
해결: 외부 block요소에 {height:1%;} 적용
참고: http://positioniseverything.net/explorer/creep.html
25. 앵커 태그 범위
문제: a를 block으로 지정하면, 블록 전체가 마우스에 반응해야하는데 여전히 텍스트에만 반응하는 문제
해결: height:1%
26. 리스트 간격
문제: 리스트요소(li)간 간격이 발생하는 문제
해결: display: inline
27. 부모 element가 아닌 전체를 기준으로 relative 위치가 설정될 때
문제: {position:absolute; bottom:0; right:0}인 요소가 relative인 부모의 우측하단에 위치하지 않고 전체 화면의 우측하단에 위치하는 문제
해결: height:1%
* FireFox의 버그
문제: 배경 이미지의 위치를 bottom으로 했을 경우, 브라우저 크기보다 컨텐츠의 크기가 짧다면, 배경이미지가 컨텐츠 하단에 위치하는 버그
해결: html {height:100%}
28. non-disappering content Bug
문제: 상위 div element의 display를 block, 하위 div element의 display를 none으로 설정했지만 하위 div element가 화면에 보이는 버그
해결: visible = true, false 사용
참고: http://positioniseverything.net/explorer/ienondisappearcontentbugPIE/index.htm
29. noscript-ghost Bug
문제: IE8에서 <noscript>안의 내용이 그대로 노출되는 버그
해결: display=inline으로 해결
참고:http://positioniseverything.net/explorer/ie8stylednoscriptbug/index.html
1. IE6 유령 text 버그
예기치 않게 DIV에서 글자가 더 보이는 경우가 있다.이 경우 대부분 주석의 문제이므로 주석을 없애면 유령 글자도 사라질 것이다.
또는 display:inline 적용으로 해결
2. DIV내 DIV height 가 적용되지 않을 때
내부 DIV에 position:relative 적용
ex) http://snook.ca/archives/html_and_css/position_relative_overflow_ie/
3. min-height 버그
왜 ie만 최소 height값이 안먹힐까....내부에서 구현을 안했나보지..하지만 방법은 있다!
01.selector {
02. min-height:500px;
03. height:auto !important;
04. height:500px;
05.}
4. 이미지 앤티앨리어싱

하지만 방법은 있다.!
img { -ms-interpolation-mode: bicubic; }
5. PNG 알파레이어 보이게
IE6는 PNG알파레이어를 인식못해 투명한 곳은 뿌옇게 나온다.
하지만
img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}
필터로 투명값 표시가능
6. IFrame 투명 백그라운드
IFrame에 넣을 HTML에거 추가해주자
/* 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 세로 스크롤바 없애기
기본설정으로 IE는 세로 스크롤바가 나와서 디자인에 옥의 티를 남긴다.
이렇게수정
html {
overflow: auto;
}
8. :hover class지원
Jquery를 이용하다 다른 element에서도 :hover를 사용해보자!
ex)
/* 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 모델 문제
원래 width는 다음과 같이 계산한다.
total width = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
하지만 IE는 box를 다음과 같이 계산한다.
total width = margin-left + width + margin-right

가끔 생각해보면 IE방식의 width가 레이아웃 잡고 코딩 하기엔 나이스하지만
W3C권고는 그게 아니므로 표준을 따라가야 한다.
대부분이 이 박스모델 문제에서 발생된다. 핵을 이용해보자
ex)
#content {
padding:10px;
border:1px solid;
width:200px;
width:180px;
}
10. Doubled Float-Margin Bug
버전: IE6
문제: float 요소에 margin을 적용했을 경우, margin이 이중으로 표현되는 문제
해결: float 요소에 display:inline 적용
참고: http://positioniseverything.net/explorer/doubled-margin.html
——
11. Peekaboo Bug
버전: IE6, IE7
문제: float 요소 안의 내용이 나오지 않다가, 브라우저 창 크기를 조절하거나 스크롤했을때에만 가끔 내용이 나타나는 문제
해결: float 요소와 그 요소를 감싸는 요소 모두 적용
position: relative; /* IE6 bugfix */
min-width: 0; /* IE7 bugfix */
참고: http://positioniseverything.net/explorer/peekaboo.html
참고: http://www.brownbatterystudios.com/sixthings/2007/01/06/css-first-aid-for-ie-peekaboo-bug/
12. Duplicate Characters Bug
버전: IE6
문제: float 요소가 1개 이상 연속될때 마지막 float 요소의 문자 끝부분이 중복 출력되는 문제로, float 요소 내부에 <!– comment –>, <input type=”hidden” />, { display:none; } 와 같은 요소들이 포함되어있을때 발생.
해결: float 요소에 display:inline 적용
참고: http://positioniseverything.net/explorer/dup-characters.html
13. Expanding Box Problem
버전: IE6
문제: 레이아웃 요소의 크기를 지정했음에도 불구하고, 지정한 크기보다 큰 텍스트(띄어쓰기가 없는 긴 텍스트)를 포함할 경우 요소의 크기가 늘어나버리는 문제
해결: 해당 요소에 word-wrap:break-word; overflow: hidden; 적용
참고: http://positioniseverything.net/explorer/expandingboxbug.html
14. Guillotine Bug
버전: IE6, IE7
문제: float 요소의 하단이 잘리거나(IE6), float 요소를 포함하는 컨테이너 요소의 크기가 늘어나버리는(IE7) 문제
해결: float 요소를 포함하는 컨테이너 요소 바로 뒤에 clear해주는 요소를 삽입(예: <div style=”clear: both”></div>)
참고: http://positioniseverything.net/explorer/guillotine.html
15. IE6 Float Model Problem
버전: IE6
문제: float 요소 다음에 width가 선언되지 않은 non-floated 요소가 위치하면, 두 요소의 바운더리는 겹쳐야 한다. 하지만 non-floated 요소의 width가 선언되면, non-floated 요소가 float 요소 옆으로 나란히 위치하는 문제.
해결: 없다. 두 요소의 바운더리가 겹쳐져야 하는 상황을 아예 만들지 말거나, 꼭 겹쳐져야한다면 position을 사용하는 등의 다른 방법을 구사.
참고: http://positioniseverything.net/explorer/floatmodel.html
16. Three Pixel Text-Jog
버전: IE6
문제: float 요소 다음에 non-floated 요소가 위치하면, non-floated 요소의 텍스트가 3 pixel 밀리는 문제.
해결: float 요소에 {margin-right:-3px}, non-floated 요소에 {height:1%; margin-left:0} 적용
참고: http://positioniseverything.net/explorer/threepxtest.html
17. Inherited margins on form elements
버전: IE6, IE7
문제: form을 포함하는 컨테이너 요소에 margin이 적용되어있을때, 특정 input 요소들이 컨테이너의 margin을 상속받는 오류.
해결: input 요소 앞에 inline 요소를 삽입하거나, span, label 등의 컨테이너 요소로 input 요소를 감싼다.
참고: http://positioniseverything.net/explorer/inherited_margin.html
18. Line-height Bug
버전: IE6
문제: plain text 중간에 inline으로 img, input, textarea, select, object가 삽입되어있을 경우 line-height 제대로 표현하지 못하는(collapse됨) 문제.
해결: inline으로 삽입된 img, input… 요소의 상하 margin을 교정 (예: {margin:45px 0; vertical-align:middle;})
참고: http://positioniseverything.net/explorer/lineheightbug.html
19. Border Chaos
버전: IE6
상황: block 요소가 두개 있다. 두번째 요소의
문제: 연속되는 block 요소중 두번째 이후 요소들의 margin-top이 음수이고, border가 적용되어있을때, 나타나는 광란의 버그
해결: 연속되는 block 요소들의 컨테이너(parent)에 {position: relative;} 적용
참고: http://positioniseverything.net/explorer/border-chaos.html
20. Disappearing List-Background Bug
버전: IE6
문제: 리스트(ol, ul, dl)를 감싸는 div의 position이 relative이고 float되어있으며, 리스트요소(li, dt)에 background가 사라지는 문제(background를 적용했을때).
해결: 리스트요소(li, dt)에 {display:inline} 적용
참고: http://positioniseverything.net/explorer/ie-listbug.html
21. Unscrollable Content Bug
버전: IE6
문제: position이 relative이고 크기가 지정되지않은 컨테이너 요소가, position이 absolute이고 크기가 페이지보다 큰 컨텐츠를 포함하고 있다면 스크롤바가 나타나야 하지만 그렇지않은 문제.
해결: 컨테이너 요소에 {height:1%} 적용
참고: http://positioniseverything.net/explorer/unscrollable.html
22. Duplicate Indent Bug
버전: IE6
문제: float요소가 padding 또는 margin이 적용된 컨테이너에 위치하고 있다면, 이중으로 적용되는 문제.
해결: 경우의 수가 워낙 많지만, 대부분의 경우 {display:inline} 으로 해결 가능.
참고: http://positioniseverything.net/explorer/floatIndent.html
23. Escaping Floats Bug
버전: IE6
문제: 크기를 지정하지 않은 컨테이너가 float요소 여러개를 포함하고 있는데(clear 요소로 float 해제했음), 컨테이너 영역이 제대로 표현되지 못하는 문제.
해결: 컨테이너에 {height:1%} 적용
참고: http://positioniseverything.net/explorer/escape-floats.html
24. Creeping Text Bug
버전: IE6
문제: block요소가 또 다른 block요소를 포함하고 있고, border-left, padding-bottom이 적용되어있을때, 내부의 block요소가 1px씩 좌측으로 기어들어가는 문제
해결: 외부 block요소에 {height:1%;} 적용
참고: http://positioniseverything.net/explorer/creep.html
25. 앵커 태그 범위
문제: a를 block으로 지정하면, 블록 전체가 마우스에 반응해야하는데 여전히 텍스트에만 반응하는 문제
해결: height:1%
26. 리스트 간격
문제: 리스트요소(li)간 간격이 발생하는 문제
해결: display: inline
27. 부모 element가 아닌 전체를 기준으로 relative 위치가 설정될 때
문제: {position:absolute; bottom:0; right:0}인 요소가 relative인 부모의 우측하단에 위치하지 않고 전체 화면의 우측하단에 위치하는 문제
해결: height:1%
* FireFox의 버그
문제: 배경 이미지의 위치를 bottom으로 했을 경우, 브라우저 크기보다 컨텐츠의 크기가 짧다면, 배경이미지가 컨텐츠 하단에 위치하는 버그
해결: html {height:100%}
28. non-disappering content Bug
문제: 상위 div element의 display를 block, 하위 div element의 display를 none으로 설정했지만 하위 div element가 화면에 보이는 버그
해결: visible = true, false 사용
참고: http://positioniseverything.net/explorer/ienondisappearcontentbugPIE/index.htm
29. noscript-ghost Bug
문제: IE8에서 <noscript>안의 내용이 그대로 노출되는 버그
해결: display=inline으로 해결
참고:http://positioniseverything.net/explorer/ie8stylednoscriptbug/index.html












글
댓글을 달아 주세요
댓글 RSS 주소 : http://lukavega.untoc.com/tc/rss/comment/38댓글 ATOM 주소 : http://lukavega.untoc.com/tc/atom/comment/38
오~~ 오랜만의 포스팅ㅎ
이거 때문에 고생?ㅋ