다음을 통해 공유

  • 아티클

 

IE9에서 웹사이트가 잘 안보이거나 문제가 있으신가요?

호환성 가이드를 참고로 여러분의 웹사이트가 IE9에서 잘 동작할 수 있도록 개선해 보세요.

자주 묻는 질문

 

질문 1. 브라우저의 버전에 변경되면 호환성 관련한 부분이 가장 큰 이슈 사항입니다. 브라우저나 IE 버전에 대한 체크를 어떻게 해야 하나요?

질문 2. IE9을 통해 웹 사이트에 접속했더니 스크립트 오류가 발생합니다. 현재 자주 발생되는 오류는 어떤 것들이 있나요? 그리고 이런 경우 어떻게 대처해야 하나요?

질문 3. 로그인 버튼 클릭 시 오류 메시지가 발생합니다. 이런 경우 어떻게 대처해야 하나요?

질문 4. CreateElement() 함수를 사용하는 경우 에러가 발생합니다. 이런 경우 어떻게 대처해야 하나요?

질문 5. IE9과 Javascript Frameworks 들간의 호환성 문제가 발생합니다. 어떻게 해야 하나요?

질문 6. 자바스크립트를 통한 암호화 기능을 사용한 영역이 정상적으로 표시되지 않습니다. 이러한 경우 어떻게 대처해야 하나요?

질문 7. iframe 내 추가 정보가 표시되지 않습니다. 이러한 경우 어떻게 대처해야 하나요?

질문 8. 연도 계산 오류로 인해 장애가 발생합니다. 이러한 경우 어떻게 대처해야 하나요?

질문 9. IE9을 설치 후에 기존에 사용하는 프로그램에서 한글 폰트 깨지는 현상이 발생합니다. 이러한 경우 어떻게 대처해야 하나요?

질문 10. 테스트를 위해 IE9을 설치 한 후에 제거하고자 합니다. 설치된 IE9을 제거하는 방법이 있는지요?

질문 11. 이전 버전의 IE 문서모드에서 동작하기 위해 X-UA-Compatible META tag를 삽입하였으나 작동하지 않습니다. 어떻게 하면 될까요?

질문 12. 그림이나 문단이 원하는 위치에 표시되지 않습니다. 어떻게 하면 될까요?

질문 1: 브라우저의 버전에 변경되면 호환성 관련한 부분이 가장 큰 이슈 사항입니다. 브라우저나 IE 버전에 대한 체크를 어떻게 해야 하나요?

답변: 일반적으로 호환성 관련한 장애 중에서 가장 빈번하게 발생하는 에러의 원인 중 대부분이 버전 체크를 하지 않거나 UA String 값을 제대로 처리하지 못해 발생합니다.
웹 서버나 웹 페이지는 인터넷 브라우저로부터 종류와 버전 등의 정보를 받아서 각 브라우저와 버전에 맞는 페이지를 보여주게 합니다. 이 때 브라우저에서 제공하는 정보를 UA(User Agent) string이라고 합니다.
예를 들어 IE8까지는 “Mozilla/4”였던 UA String 값이 IE9에서는 “Mozilla/5”로 변경되었으므로
단순히 UA String 값이 ‘Mozilla/5’ 인지를 비교하여 Internet Explorer와 타 브라우저를 판단하여서는 안됩니다.
또한 “MSIE 9.0” 값을 얻어서 IE의 버전이 “9”임을 인식할 수 있습니다.

브라우저 및 IE 버전 판단 방법은 아래 샘플 코드를 참고 하시기 바랍니다.

function getInternetExplorerVersion() {
var rv = -1;
if (navigator.appName == 'Microsoft Internet Explorer') {
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat(RegExp.$1);
}
return rv;
}
function checkVersion() {
var ver = getInternetExplorerVersion();
if (ver > -1)
msg = "You are using Internet Explorer " + ver;
else
msg = "You are not using Internet Explorer";
alert(msg);
}

또한 일부 ActiveX 관련해서 레지스트리의 값을 이용해서 IE의 버전을 체크하는 경우가 있는데, 이런 경우 UA String을 사용하면 이를 해결할 수 있습니다.

 

질문 2: IE9을 통해 웹 사이트에 접속했더니 스크립트 오류가 발생합니다. 현재 자주 발생되는 오류는 어떤 것들이 있나요? 그리고 이런 경우 어떻게 대처해야 하나요?

답변: IE9 내부적으로는 코드 네임 “Chakra”라고 이름 붙여진 새로운 JavaScript 엔진을 사용합니다. Chakra는 새로운 JavaScript 컴파일러를 포함하고 있는데, 이 컴파일러가 소스 코드를 컴파일하여 기계어로 바꿔주며, 새로운 인터프리터와 더불어 런타임과 라이브러리도 최적화하여 실행을 향상시켜 줍니다. 또한 스크립트 코드를 백그라운드에서 컴파일 하기 때문에 스크립트 코드의 변경 없이 멀티코어 머신에서 더 훌륭한 성능을 발휘합니다
자바스크립트 에러와 관련해서 현재까지 주로 발생되는 스크립트 문제 유형은 다음과 같습니다.
 로그인 실패
 버튼 클릭시 오류
 화면 안 보임
 렌더링 깨짐
이러한 오류에 대해서는 기존의 사용한 JavaScript 코드를 웹 표준을 맞게 수정해야 합니다. 웹 표준을 준수하지 않는 경우 IE8에서 잘 동작하더라도 에러가 발생될 수 있으니 이점 참고 하시기 바랍니다.

 

질문 3: 로그인 버튼 클릭 시 오류 메시지가 발생합니다. 이런 경우 어떻게 대처해야 하나요?

답변: 이전 버전까지는 getElementById()의 경우 document에서 해당 ID에 대한 unique한 html 요소를 찾아 주는데, IE의 경우 해당 요소의 ID와 Name 속성을 모두 찾을 수 있습니다.
그러나 IE9에서는 ID 속성만이 유효하게 되고, Name 속성을 사용하는 경우 null 값을 반환하게 됩니다.

<input type='checkbox' name='NxCheckKeyDefense' ... >
var objKeyDefense = document.getElementById("NxCheckKeyDefense") ;

이러한 문제점을 해결하기 위해서는 개체에 ID 속성을 부여해 주어야 합니다.

<input type='checkbox' name='NxCheckKeyDefense' id=“NxCheckKeyDefense’>
var objKeyDefense = document.getElementById("NxCheckKeyDefense") ;

 

질문 4: CreateElement() 함수를 사용하는 경우 에러가 발생합니다. 이런 경우 어떻게 대처해야 하나요?

답변: 새로운 객체를 만들기 위해 CreateElement() 함수를 사용하는 경우 IE9에서는 createElement() 함수의 인수에 “<>”가 포함되어서는 안됩니다.

createElement(‘<div id=“’+LOGIN.CL.CONTAINERID_INST+’” style=“display:none”></div>’);

이러한 문제를 해결하기 위해서는 createElement() 함수를 통해 DOM개체를 생성하고 setAttribute() 함수를 통해 속성을 부여하는 것이 올바른 방법입니다.

obj = document.createElement("div");
obj.setAttribute("id", LOGIN.CK.CONTAINERID);
obj.setAttribute("style", "display:none; position:absolute;");
document.body.appendChild(obj);

 

질문 5: IE9과 Javascript Frameworks 들간의 호환성 문제가 발생합니다. 어떻게 해야 하나요?

답변: IE9에서는 웹 표준에 따라 ECMAScript 5를 JavaScript 엔진으로 채택하여 최적화된 성능을 제공합니다. 이로 인한 변화에 따라 구버전의 Jquery, Prototype, Moo tools 와 같은 Javascript frameworks 와 호환성 문제가 발생하는 경우가 있습니다.
Framework 별로 개발사에서 IE9과의 호환성 문제를 해결하는 업데이트가 지속적으로 이루어지고 있으므로, 이러한 경우 해당 Framework를 최신 버전으로 업데이트 하는 것을 권장합니다.
이와 관련된 보다 자세한 사항은 아래 URL을 참고 하기 바랍니다.
https://blogs.msdn.com/b/ie/archive/2010/07/16/how-ie9-platform-preview-feedback-changed-the-javascript-standard.aspx

 

질문 6: 자바스크립트를 통한 암호화 기능을 사용한 영역이 정상적으로 표시되지 않습니다. 이러한 경우 어떻게 대처해야 하나요?

답변: IE9에서는 Jscript.Encode/Jscript.Decode를 지원하지 않으므로 <Script language=“Jscript.Encode”>와 같이 Jscript를 통해 스크립트를 암호화하는 경우 스크립트 파일이 처리되지 않습니다.

<Script language=“Jscirpt.Encode” src=“/commonEncode.js”>

IE9에서는 스크립트 암호화를 지원하지 않으므로 스크립트를 다음과 같이 수정해야 합니다.

<Script src=“/common.js” type=“text/javascript”>

 

질문 7: iframe 내 추가 정보가 표시되지 않습니다. 이러한 경우 어떻게 대처해야 하나요?

답변: IE8에선 자식 프레임은 부모 프레임과는 별도로 독립적인 버전을 지닐 수 있었지만, IE9에서는 이전 버전과 다른 DOM모델을 사용하기 때문에 부모 프레임과 자식 프레임이 독립적인 버전을 가지더라도 부모 프레임에 맞추어 동작하게 됩니다.

<iframe width="150" height="90" src="http://abc.com/event_call.htm?pid=15090@info" frameBorder="0" scrolling="no" vspace="0" hspace="0" bordercolor="#000000">

• 부모 프레임(IE9) : <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
• 자식 프레임(IE7) : <meta http-equiv="X-UA-Compatible" content="IE=IE=7"/>
이러한 경우 부모 프레임과 자식 프레임이 동일한 IE 버전에서 구동되도록 코드를 작성합니다.

질문 8: 연도 계산 오류로 인해 장애가 발생합니다. 이러한 경우 어떻게 대처해야 하나요?

답변: 일반적으로 연도 계산을 위해 getYear() 함수를 사용하게 되는데 자바스크립트 엔진이 변경됨에 따라 getYear() 함수의 리턴 값이 변경되었습니다.
기존 IE 버전에서는 0을 기준으로 하여 2010이 리턴 되었지만, IE9부터는 1900년도를 기준으로 (2010-1900=110) 110이 리턴 됩니다.

var c_year = today.getYear();
if(c_year-c_yy<19) alert("19세이하 미성년자는 회원가입이 불가능합니다.");

이러한 문제를 해결하기 위해서는 getYear() 함수를 getFullYear() 함수로 대체합니다.

var c_year = today.getFullYear();
if(c_year-c_yy<19) alert("19세이하 미성년자는 회원가입이 불가능합니다.");

 

질문 9: IE9을 설치 후에 기존에 사용하는 프로그램에서 한글 폰트 깨지는 현상이 발생합니다. 이러한 경우 어떻게 대처해야 하나요?

답변: 한글이 깨지는 이유는 유니코드(한글 모두 지원하는 방식)를 지원하지 않거나, 않았던
프로그램에서 발생합니다.
제어판의 언어설정을 이용하여 해당 증상의 해결을 할 수 있습니다.
A. [시작] -> [제어판] -> [키보드 또는 기타 입력 방법 변경]
B. [형식] 탭에서 형식(F) : 부분을 [영어(미국)]으로 변경 후 적용(A)
C. [위치] 탭에서 현재 위치(C) : 부분을 [미국]으로 변경 후 적용(A)
D. [키보드 및 언어] 탭에서 키보드 변경(C)... 선택
E. [일반탭] 기본 입력 언어(L) 부분 아래에서 영어(미국) -> US 선택 후 적용(A)
F. [관리자 옵션] 탭에서 설정 복사(O)
G. 현재 설정 복사: 모든 항목을 체크 후 [확인]
H. [관리자 옵션] 탭에서 시스템 로캘 변경(C)
I. 현재 시스템 로캘 부분(C): 영어(미국) 으로 선택 후 [확인]
J. [지금 다시 시작]을 눌러 시스템을 재 시작 합니다.
그리고 다시 아래와 같이 수행합니다.
A. [시작] -> [제어판] -> [키보드 또는 기타 입력 방법 변경]
B. [형식] 탭에서 형식(F): 한국어(대한민국)으로 변경 후 [적용]
C. [위치] 탭에서 현재 위치(C): 대한민국으로 변경 후 [적용]
D. [키보드 및 언어] 탭에서 키보드 변경(C)
E. [일반] 탭에서 한국어(대한민국) -> US 선택 후 [적용(A)]
F. [관리자 옵션] 탭에서 설정 복사(O)
G. 현재 설정 복사: 모든 항목을 체크 후 [확인]
H. [관리자 옵션] 탭에서 시스템 로캘 변경(C)
I. 현재 시스템 로캘 부분(C): [한국어(대한민국)] 으로 선택 후 [확인] 하시면 됩니다.

 

질문 10: 테스트를 위해 IE9을 설치 한 후에 제거하고자 합니다. 설치된 IE9을 제거하는 방법이 있는지요?

답변: 베타 버전을 설치한 후에 장애로 인해 사용이 불가능한 경우 IE9을 제거할 수 있습니다.
설치된 IE9을 제거하는 방법은 다음과 같습니다.
A. [시작] -> [제어판] -> [프로그램 기능]
B. 왼편 상단의 [설치된 업데이트 보기]
C. Windows Internet Explorer 9을 선택 후 [프로그램 제거] 선택
D. 팝업 창에서 [확인]
E. [지금 다시 시작]을 눌러 시스템을 재 시작 합니다.

질문 11: 이전 버전의 IE 문서모드에서 동작하기 위해 X-UA-Compatible META tag를 삽입하였으나 작동하지 않습니다. 어떻게 하면 될까요?

답변: IE 이전 버전과의 호환성 문제를 해결하기 위해 <meta http-equiv="X-UA-Compatible" content="IE=7" />와 같이 X-UA-Compatible META tag를 삽입하여 IE9을 IE 이전 버전의 문서모드로 동작하게 할 수 있습니다. 그러나 X-UA-Compatible META tag가 <Link>태그나 <Script>태그 이후에 삽입되어 있는 경우, IE9은 자동으로 IE9 표준모드로 동작하고 X-UA-Compatible META tag를 무시하게 되므로, 제작자가 의도한 문서 모드로 전환되지 않습니다.
X-UA-Compatible META tag는 <HEAD> 태그 바로 이후에 삽입하는 것을 권장합니다.

질문 12: 그림이나 문단이 원하는 위치에 표시되지 않습니다. 어떻게 하면 될까요?

답변: IE9 부터는 개체의 위치나 크기를 지정하는 Style 관련 속성(top, left, width, height 등)에 값을 지정할 때 반드시 단위(px, pt 등)를 함께 명시하여야 합니다. 그렇지 않은 경우 속성에 원하는 값이 지정되지 않습니다. layer.style.left = "0px”; 와 같이 단위(px, pt 등)를 포함한 값을 style 속성에 지정하여야 합니다.