IE6~8을 IE9처럼 보이게 만들기(ie7/ie8/ie9.js 사용법)
IE6~8을 IE9처럼 보이게 만들기(ie7/ie8/ie9.js 사용법)
우리나라에서 자주 사용하는 브라우저는 인터넷 익스플로러(IE)와 크롬(chrome) 정도로
구분할 수 있을 것 같은데요. 사용하는 버전도 다양해서 IE만 보자면 IE11버전 점유율이 가장 높고
IE7이 20% 정도, IE8이 30% 정도 입니다. (이건 구글 애널리틱스에 기반한 제 개인적인 통계입니다.)
블로그 운영자라면, 이 수치는 무시할 수 없는 수준이고, 웹사이트 개발자라면 1% 미만도 안 되는 IE6 이용자까지도
고려해서 사이트를 설계해야 할 경우도 있습니다.
IE 구 버전(IE6~8)의 문제
인터넷 익스플로가 초반에 무료로 배포되면서 우리나라에는 유독 IE 이용자가 많습니다.
다른 브라우저(크롬, 사파리, 파이어폭스 등)에 비해 IE 구버전은 표준과 호환이 안 되는 문제가
있고 더구나 IE6에 내재하는 버그가 많아 표준 브라우저에서 보이는 것과 다르게 표시될 수 있습니다.
IE7은 보다 많이 개선되었지만 CSS2.1 지원이 부족합니다.
특정 브라우저 버전에 맞게 스타일 시트를 작성하는 것도 방법이겠지만, 이는 복잡하고 시간 소모적입니다.
이보다 더 쉽고 간단한 방법이 있습니다.
IE7 자바스크립트 라이브러리
IE7이라 부르는 자바스크립트 라이브러리를 사용하는 것인데요.
IE7은 IE가 표준을 준수하는 브라우저처럼 행동하게 만드는 자바스크립트 라이브러리입니다.
이 자바스크립트 라이브러리로 수많은 HTML, CSS 문제들을 고치고,
투명 PNG가 IE5, IE6에서 올바르게 작동하도록 할 수 있습니다.
사용법 : 아래 붉은색으로 된 코드를 <head> 안에 넣습니다. <style>태그 앞 뒤로 넣을 수 있음.
if lt ie7 는 ie7 이하일 경,우 if lt ie8은 ie8 이하일 경우라는 뜻으로, 해당 ie를 제외한 다른 브라우저들은
이 구문을 주석으로 보고 무시합니다.
IE7.js
IE5.5~6 을 IE7처럼 보이게 만듦.
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<![endif]-->
IE8.js
IE5.5~7을 IE8처럼 보이게 만듦
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->
*IE8.js 파일을 사용하면 IE7.js를 추가할 필요가 없음.
IE9.js
IE5.5~8을 IE9처럼 보이게 만듦
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
*IE9.js를 사용하면 IE7/IE8.js를 추가할 필요 없음.
위의 코드는 구글 코드로
직접 파일을 다운 받아 업로드 하는 방법도 있습니다.
자바스크립트 라이브러리 직접 다운받기
1. 아래 사이트 접속 후
http://code.google.com/p/ie7-js
2. 화면 왼쪽에 downloads 에서 ie7-2.1(beta4).zip 파일을 다운 받습니다.
(아래 이미지에서 빨간색 화살표 부분)
3. 압축을 풀면 [ie7] 폴더가 생성되고 그 안에 [src] 폴더가 있는데요,
ie7 폴더 안의 파일과 src 파일은 본래 같은 파일이지만, src 파일은 읽을 수 있는 내용이고
메인 폴더 안의 파일은 압축되어 있어 읽기가 힘듭니다.
4. 업로드 할 때는 사이트에 [ie7]을 만들고 그 안에 필요한 파일과 아래 blank 파일을 넣습니다
-ie9.js
-blank.gif
ie7-squish.js 파일은 뭔가요?
ie7.js에 의해 고쳐지지 않는 가장 중요한 버그가 아래 셋입니다.(ie6 이하 버전에서 발생)
-이중 여백 float 버그(double margin float bug)
-스크롤되지 않는 내용 버그(unscrollable content bug)
-있었다 사라지는 버그(Peekaboo bug )
이 버그는 ie7-squish.js 파일로 교정될 수 있습니다.
ie7.js에 이 부분을 포함하지 않는 이유는 , 이 때문에 일부 요소의 행동을 바꿀 수 있어 레이아웃에
손상을 초래할수 있어 그렇다고 합니다.
ie7-squish.js 파일도 추가하려면 다음처럼 합니다.(ie7 폴더가 있다고 가정할 때)
<!--[if lt IE 9]>
<script src="ie7/IE9.js"></script>
<script src="ie7/ie7-squish.js"></script>
<![endif]-->
아래는 참고 삼아 읽어보시면 좋습니다.
http://ie7-js.googlecode.com/svn/test/index.html
위 사이트는 각 자바스크립트 라이브러리가 교정하고 있는 상세 목록입니다.
간단하게 정리하면 다음과 같습니다.
IE7.js에서 담고 있는 것
-다음 css 선택자를 지원
자식 선택자 >
인접형제 선택자 +
일반형제 선택자 ~
.multiple.classes
:hover
:first-child
[attr]
[attr="value"]
[attr~="value"]
[attr|="value"]
[attr^="value"]
[attr$="value"]
[attr*="value"]
- fixed positioning 지원(background-attachement나 position:fixed )
- background-image 속성과, img 요소에서 png alpha transparency 지원
- min-width, min-height, max-height, max-width 지원
- overflow:visible 지원
IE8.js에서 담고 있는 것
-다음 css 선택자 지원
::after
::before
:active
:focus
:lang()
IE9.js에서 담고 있는 것
-다음 css 선택자 지원
:checked
:disabled
:empty
:enabled
:indeterminate
:first-of-type
:last-child
:last-of-type
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:root
:target
-opacity 속성 지원
-다음 요소의 렌더링을 지원하고, 기본적 스타일을 제공함.
article, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, summary, time, video
참고로, 자바스크립트는 사용자가 꺼 놓으면 작동하지 않습니다.
또 저는 ie7을 사용하고 있는데, 이 자바스크립트 라이브러리를 추가했을 때 아무것도 표시되지 않네요.
제 브라우저의 설치 결함 때문인지도 모르겠습니다.
html5shiv 삽입하기 (ie6-8에서 html5 적용하기)
비표준 모드quirks mode, 표준 모드 standards mode 차이와 DOCTYPE
DOCTYPE 선언하는 이유와 버전별 선언 정리 (HTML5, HTML 4, XHTML)