css3 ie지원적용 방법

-  word-wrap  (지원 브라우저 : IE6~9, FF, CR, SF, OP)

   : word-wrpa : break-word; 

-  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:NanumGotthic, 맑은고딕, ngttf, ngeot;

     }

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

   : opacity:0.5;

    *filter:alpha(opacity=50);

-  box-shadow   (IE9, FF, CR, SF, OP)

  : 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.

-  border-radius  (IE9, FF, CR, SF, OP)

: border-radius:30px;

-moz-border-radius:30px;

-webkit-border-radius:30px;

(IE6~7 브라우저는 border-radius 속성을 지원하지 않지만 마이크로소프트 전용 포멧 자바스크립트 파일 ie-css3.htc 를 사용하면

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

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

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

)

- 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);