IE8에서 메뉴가 사라지는 원인
인터넷 익스플로러 8(IE8)은 표준 CSS3 opacity 속성을 지원하지 않습니다. 따라서 별도의 스타일 시트에 포함된 특정 div 요소에 opacity 속성을 적용하면, 해당 메뉴가 화면에 아예 나타나지 않는 문제가 발생할 수 있습니다.
IE8은 마이크로소프트 고유의 필터 문법만 인식하기 때문에, 크로스 브라우저 호환성을 확보하지 못한 일반적인 opacity 선언으로는 의도한 대로 렌더링되지 않습니다.
IE8에서 투명도를 적용해 메뉴 표시하기
IE8에서도 요소가 정상적으로 보이도록 하려면, 표준 opacity 속성과 함께 마이크로소프트 전용 필터 구문을 반드시 함께 작성해야 합니다. 아래와 같이 선언 순서에 유의하여 작성하세요.
opaque {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* 첫 번째 */
filter: alpha(opacity=90); /* 두 번째 */
}코드 설명
- -ms-filter: IE8 이상에서 사용되는 공식 필터 속성입니다. 값은 반드시 큰따옴표로 감싸야 합니다.
- filter: alpha(): IE8 이전 버전(IE5.5~7)까지 하위 호환을 위해 함께 작성합니다.
- 선언 순서: -ms-filter를 먼저, filter를 나중에 선언해야 IE8이 올바른 값을 적용합니다.
추가 팁
투명도 값의 범위는 두 문법이 서로 다릅니다. 표준 opacity는 0~1 사이의 소수를 사용하고, alpha() 필터는 0~100 사이의 정수를 사용합니다. 예를 들어 투명도 70%를 원한다면 opacity: 0.7과 alpha(opacity=70)을 함께 지정하면 됩니다.
참고로 위 코드는 IE9 이상 및 모던 브라우저에서는 필요하지 않으며, 오래된 브라우저 지원이 필요한 경우에만 사용하는 것이 좋습니다.