본문 바로가기
html

IE6~8을 IE9처럼 보이게 만들기(ie7/ie8/ie9.js 사용법)

by 지구별에 2014. 12. 19.

 

 

IE6~8을 IE9처럼 보이게 만들기(ie7/ie8/ie9.js 사용법)

 

우리나라에서 자주 사용하는 브라우저는 인터넷 익스플로러(IE)와 크롬(chrome) 정도로

 

구분할 수 있을 것 같은데요. 사용하는 버전도 다양해서 IE만 보자면 IE11버전 점유율이 가장 높고

 

IE7이 20% 정도, IE8이 30% 정도 입니다. (이건 구글 애널리틱스에 기반한 제 개인적인 통계입니다.)

 

브라우저 점유율 (IE, 크롬 점유율 비교)

 

 

블로그 운영자라면,  이 수치는 무시할 수 없는 수준이고, 웹사이트 개발자라면 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 적용하기)

 

크로스브라우징, 웹표준과 핵(hack)

 

haslayout 이란 (IE버그 해결책)

 

비표준 모드quirks mode, 표준 모드 standards mode 차이와 DOCTYPE

 

DOCTYPE 선언하는 이유와 버전별 선언 정리 (HTML5, HTML 4, XHTML)

 

반응형

'html' 카테고리의 다른 글

[html5] article vs section 차이  (2) 2014.12.30
HTML5 기본 레이아웃  (0) 2014.12.24
html5shiv 삽입하기 (ie6-8에서 html5 적용하기)  (0) 2014.12.18
[html] meta 태그 사용법  (7) 2014.12.17
[html5] datalist 태그  (0) 2014.10.28

댓글