IE에서 AjaxToolkit DropShadow 스타일이 제대로 먹지 않을 때

다른 브라우저에서는 멀쩡히 잘 나오는 것들이 IE에서 깨져서 나오는 경우가 있다.

IE에서만 깨진다면, IE 버전이 8 이하로 낮아서 HTML5, CSS3를 정상적으로 표현하지 못하는 경우가 100%다.

그런데, IE 버전이 9, 10, 11이라 낮지도 않은데도 불구하고 깨진다?

보통 이런 경우에는, IE의 브라우저 문서 표시 방법을 바꿔보면 잘 나오게 되는 경우가 있다.

내 경우에는 ASP.NET AjaxToolkit 페이지 중 DropShadowExtender가 적용된 부분이 까맣게 그림자로 표시되어야 하는데

이게 IE 10에서 정상적으로 보이지 않고 배경 전체가 시꺼멓게 보이는 문제가 있었다.

크롬에서 멀쩡히 잘 나오는 그림자 영역.

IE에서 깨져 보이는 그림자 영역.

대체 왜 그럴까 봤더니

IE 10에서 기본 표시 문서 모드가 "Internet Explorer 8 표준"으로 되어 있었다.

(한번 바꿔 놓으면 설정이 계속 유지가 되는 건가??? 실제 바꿔보니 그렇지 않던데... 왜 그랬는지 도통 모르겠다. ==> 이 부분과 관련해서 아래에 내용을 추가했다.)

저 부분을 원래대로 IE 10 표준으로 바꾸고 나니 정상으로 돌아왔다.

참고로, 그림자가 위와 같이 깨지는 것은, IE 8 이하에서 페이지 기본 색상이 "투명"으로 설정되기 때문이다.

그래서 해당 그림자 영역 부분의 색상을 강제로 "White"로 지정해주면 IE 8 이하 버전에서도 심하게 깨져 보이는 것은 피할 수 있다.

이 부분을

이렇게.

추가.

다시 확인해보니, 호환성 보기 설정에서 모든 웹 사이트에서 호환성 보기가 체크되어 있었다.

그래서 늘 IE7 호환 모드로 실행됐던 것이다.

평소에는 안 보이는 메뉴 도구 모음. ALT 키를 누르면 나타난다. Alt 키를 눌러서 "도구" 메뉴를 선택하면

메뉴가 쫙 펼쳐지는데, 그 중에서 "호환성 보기 설정"을 클릭.

호환성 보기 설정 창에서 위에 표시된 부분의 체크를 모두 해제한다.

호환성 보기는 말 그대로 표준 모드에서 정상적으로 표시되지 않는 웹 사이트에 한해 구 버전으로 전환해서 표시해주는 기능이다.

그 때 그 때 필요할 때마다 해당 사이트만 추가해서 보면 된다.

따라서 평소 별 이상 없는 웹 사이트들은 호환성 보기를 할 이유가 없다. 

더구나 최신 웹 표준(HTML5, CSS3) 등으로 만들어진 페이지를 제대로 보기 위해서는 호환성 보기는 금물!