[IE8 대응] opacity 대응방법 / border-radius 대응방법

IE8까지 지원해야 하는 경우 기존에 아무생각없이 되리라 생각하고 사용하던 CSS를 사용할 수 없는 경우가 발생한다. opacity 같은 경우가 그렇다. IE8에서는 opacity를 사용할 수 없다. 이게 뭔 소리냐...

지금 내 심정

 

 

혹시 내가 사용하는 CSS 클래스가 해당 브라우저에서 사용이 가능한지 알고 싶다면 다음 사이트에서 확인할 수 있다.

 

Can I use... Support tables for HTML5, CSS3, etc

Can I use... Support tables for HTML5, CSS3, etc

그 대신 각 브라우저마다 다음 코드를 사용하면 적용된다. 넷스케이프를 대체 누가 적용할지는 모르겠지만 누군가는 사용하겠지..?

/* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

}

비슷한 이유로 IE8에서는 border-radius 를 사용할 수 없다. 그런데 이건 프리픽스도 제공해주지 않는다! 아!!! 이 경우 포기하거나 js 플러그인을 설치하는 방법이 있다. 몇 가지 js 플러그인을 소개한다. 나는 굳이 이런 방법을 쓰지 않고 그냥 백그라운드 이미지로 대응하는 걸 선호한다.

 

 

CSS3 PIE

CSS3 PIE: CSS3 decorations for IE

 

Code

Google Code Archive - Long-term storage for Google Code Project Hosting.

JQuery Corner Demo

JQuery Corner Demo