인터넷 익스플로러 6,7,8 에서 CSS3 작동하도록 하는법

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

ie-css3.htc

이게 뭔가요?

IE-CSS3 는 인터넷 익스플로러에서 곧 다가올 CSS3 표준에서 가능한 인기있는 새로운 스타일들의 지원을 제공해줍니다.

동작은

인터넷 익스플로러로 페이지를 보고 있다면, 몇몇 요서들은 스크립트에 의해 벡터 마크업 언어(VML) 내에서 재생성되어 있을겁니다. IE-특화 벡터 그림 언어는 IE가 못하는 둥근 모서리나 블러 효과와 같은 CSS 표현을 제공합니다.

사용법

평소 하던대로 CSS 를 작성하되 새 한 줄을 더하세요:

.box {

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

  -webkit-border-radius: 15px; /* Safari and Chrome */

  border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */

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

  -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */

  box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */

  behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */

}

화제와 차선책

아마도 z-index 문제에 봉착하게 될듯한데, especially if embedding one IE-CSS3 enabled element inside of another.두가지의 차선책이 있다 :

• IE-CSS3 요소를 둘러싸고있는 요소보다 큰 숫자로 z-index 부여.
• IE-CSS3 요소에 position: relative 또는 position: absolute 같은 위치값 부여.

스타일과 상태

스타일	작동	비작동
border-radius	네 귀퉁이 반경 설정 외곽선	각 귀퉁이 반경 개별 설정
box-shadow	흐림정도 위치값	#000 보다 다른 아무 색상이나
text-shadow	흐림정도 위치값 색상

번역 by : darthJun 06-15-2010
주의: 날림 번역이니 영어 전문가는 원문을 보시기 바람.