[CSS] IE6~9브라우저에서 CSS3사용하기(버전별 버그 해결)

text-overflow: IE6~9, CR, SF, OP 지원

text-overflow:ellipsis;

-o-text-overflow:ellipsis;

@font-face{...} : IE6~9, FF, CR, SF, OP

@font-face{ font-family:ngttf; src:url(NanumGothic.ttf);}

@font-face{ font-family:ngeot; src:url(NanumGothic.eot);}

body, input, textarea, select, button{

font-family:NanumGothic, 맑은고딕, ngttf, ngeot;

}

opacity:지원 브라우저 : IE6~9, FF, CR, SF, OP

opacity:0.5;

*filter:alpha(opacity=50);

box-shadow:지원 브라우저 : IE6~9, FF, CR, SF, OP

IE6~7 브라우저는 filter 효과를 사용하여 다소

다른 표현을 보여준다.

box-shadow:10px 10px 10px silver;

-moz-box-shadow:10px 10px 10px silver;

-webkit-box-shadow:10px 10px 10px silver;

filter:progid:DXImageTransform.Microsoft.Shadow(color=silver,direction=135, strength=10);

text-shadow: 지원 브라우저 : IE6~9, FF, CR, SF, OP

text-shadow:5px 5px 0 #ccc;

filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color=#cccccc, Positive=true);

display:inline-block; zoom:1;

border-radius:지원 브라우저 : IE9, FF, CR, SF, OP

IE6~7 브라우저는 border-radius 속성을

지원하지 않지만

마이크로소프트 전용 포멧 자바스크립트 파일

ie-css3.htc 를 사용하면

동일하게 렌더링 할 수 있다.

- 관련정보 : http://fetchak.com/ie-css3/

- 문제해결 : http://support.microsoft.com/kb/306231/en-us?fr=1

border-radius:30px;

-moz-border-radius:30px;

-webkit-border-radius:30px;

background:gradient

지원 브라우저 : IE6~9, FF, CR, SF

background:#3EAF0E -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3EAF0E), to(#fff));

background:#3EAF0E -moz-linear-gradient(top, #3EAF0E, #fff);

filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#3EAF0E, endColorStr=#ffffff);

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

float 를 쓴 객체에 margin 가로값을 주고나서는 꼭 display: inline 값을 주자는 것!

거의 모든 IE관련 버그는 홀리핵이라는 녀석을 많이 사용하는데, 사용법은 간단합니다

* html { height: 1px; }

그리고 css 상단에는 모든 * 필터를 이용해서 마진과 패딩을 0으로 셋팅하고 CSS 코딩을 시작한다면, 거의 모든 브라우저의 마진 및 패딩 문제를 해결한 상태에서 코딩을 시작할 수 있습니다. 물론 100% 해결되는 건 아니지만 80% 이상 원하는 시안을 얻는데 도움이 됩니다.

* { margin: 0; padding: 0; }

가장 널리쓰고, 유용한 핵이라고 할 수 있겠습니다~

위에 녀석들도 필수적으로 숙지하고 이용해야 하는 자주 등장하는 녀석들입니다만, 역시 IE의 패딩버그를 따라갈 수 없지요.. 덜덜 ㅠㅠ 이 패딩버그는 상당히 많이 발생하고, 레이아웃도 깨먹고, 고치는데 많이 헷갈리기도 하는 기특한 녀석이라서~ 정말 겁납니다~

위에 사용한 별표 * html 을 이용해서 해결하는 방법이 있습니다~

CSS 표준의 width나 height 값은 border 값, padding 값, margin 값을 모두 제외한 순수한 알맹이 값을 의미하는 반면에 IE는 height나 width에 padding과 border값을 포함합니다. 따라서 상당히 레이아웃 차이가 많이 나는 경우가 있습니다. 그런 경우에는 아래의 방식대로 해결하시면 됩니다.

 #content { width: 200px; padding-left: 10px; }

이렇게 하면 일반브라우저에서는 총 너비는 210px 입니다. 그런데 이것을 IE에서는 그대로 200을 유지해버리기 때문에, 실제 크기 210px 을 줘야합니다.

           #content { width: 200px; padding-left: 10px; }

             * html #content { width: 210px; }

             /* 핵으로 210px 을 줍니다, 패딩은 위에서 줘서 패스~ */

맥용 IE에서는 CSS를 정상적으로 읽는데 핵 때문에 다시 깨집니다. 그래서 다시 맥용 IE를 위해서 아래와 같이 코딩해주면 완성됩니다.

#content { width: 200px; padding-left: 10px; }

* html #content { width: 210px; w\idth: 200px; }

/* \ 를 이용해 200px로 돌려줍니다~ */

CSS에서 IE6 Flicker Bug 없애기

html { 

   filter: expression(document.execCommand("BackgroundImageCache", false, true));

}