익스플로러 9이하 브라우저에서 CSS3 속성 (radius, shadow) 및 HTML5 태그 사용하기

익스플로러9 이하 브라우저에서 CSS3 속성(radius, shadow) 사용하기

.TEST{

-moz-border-radius: 15px; /* for Firefox */

-webkit-border-radius: 15px; /* for Crome, Safari */

border-radius: 15px; /* IE9, Opera 10.5, 미래 브라우저들 */



-moz-box-shadow: 10px 10px 20px #000; /* for Firefox */

-webkit-box-shadow: 10px 10px 20px #000; /* for Crome, Safari */

box-shadow: 10px 10px 20px #000; /* IE9, Opera 10.5, 미래 브라우저들 */



behavior:url(ie-css3.htc); /* for 구형 익스플로러를 위한 스크립트 핵 */



}

behavior를 이용해서 ie-css3.htc 파일을 읽어오는 부분만 넣어주면 CSS3의 대표적인 속성을 사용할 수 있다.

http://fetchak.com/ie-css3/ie-css3.htc 

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

* -moz-(파이어폭스), -webkit-(웹킨 엔진을 사용하는 크롬과 사파리), -o-(오페라)를 위한 '프리픽스' 코드임.

* radius : 네 개의 모서리를 한 사이즈로 똑같이 설정

* box-shadow : 그림자 X, Y 위치, 농도, 그림자색상(#000 검정만 지원)

* text-shadow : 그림자 위치, 농도, 색상도 지원함.


혹은 모더나이저를 이용해서도 사용이 가능하다. Modenizr 를 검색해서 스크립트를 다운받고

<script type="text/javascript" src="modernizr-2.0.6.js"></script> 선언만 해주면 된다.
http://www.modernizr.com 

css 기능 및 html5 기능을 사용할 수 있다.

IE9 이하 버전에서 HTML5 에서 <Header><footer><section>등등 시멘틱 태그를 사용하기 위해서는
HTML5shiv 스크립트를 이용하면 된다.
사용방법은 모더나이저와 동일

스크립트 선언후

스타일에

/* HTML5 tages */

header, nav, section, article, figure {

display:block;

}  

이렇게 선언해주면 사용이 가능하다. ie의 경우는 document.Create("Header") 이런식으로 추가해주면 된다. 물론 IE9 이하에서만..

[출처] HTML5 태그를 익스플로러에서 인식시키기 위한 방법|작성자 뽀샤시