반응형웹 사이트 프로젝트를 할 때 크로스 브라우징 검수를 할 때가 있다.
작업하는 PC의 IE가 10이고 개발자 도구를 이용하여 IE 9 이하를 테스트하는 것과 실제 순수 IE9 이하와는 결과가 틀리게 나오는 경우가 많다. 또한 IE Tester도 비슷하게 구현하는 것인지라 최대한 가상 PC를 설치하여 테스트함을 추천한다.

위에 언급한 것과 같이 개발 도구에서 에뮬레이션으로 IE9로 설정하고 테스트 하여도 자바스크립트 오류가 안나올 때가 있는데 그 중에 하나인 script5022 오류에 대해 포스팅 한다.

만약에 콘솔에 script5022 DOM Exception: INVALID_CHARACTER_ERR (5) 오류라고 나오고 jquery 파일의 165라인이라고 나올 때가 있다.

아마 이런 경우에는 jquery 버전이 1.10대일 수도 있다.
필자의 경우는 헤더에 아래와 같이 스크립트 파일을 로드했었다.

<script type="text/javascript" src="/js/jquery-1.10.1.js"></script>
<script type="text/javascript" src="/js/jquery-migrate-1.2.1.min.js"></script>

 이렇게 하다보니 IE9에서 5022 오류가 났다.
이럴 경우 아래와 같이 코드를 바로 밑에 추가해줬더니 문제가 사라졌다.

<!--[if lte IE 9]>
    <script type="text/javascript" src="/js/css3-mediaqueries.js"></script>
<![endif]-->

 IE9 이하 브라우저에서 css3를 지원하지 않는 브라우저에서 미디어쿼리를 쓸 수 있도록 최대한 사용성을 높이려는 라이브러리 파일인 css3 mediaqueries.js를 로드한 것이다.

해당 파일은 https://code.google.com/p/css3-mediaqueries-js/ 이 곳에서 다운 받을 수 있다.