IE7.js - HTML5 요소 및 CSS 선택자 크로스브라우징

IE7-js 소개

딘 에드워드의 ie7-js는 자바스크립트 라이브러리로서, 구 버전의 IE에서 HTML5 태그는 물론 일부 CSS3 선택자도 인식하게 해준다. 또한 IE6 이하에서 PNG의 투명효과를 지원하지 않는 문제를 해결한다.

• 자식 선택자, 인접 선택자, 구조 선택자, 속성 선택자 등의 css선택자
• max-width, min-height를 비롯한 css속성
• png 그림 파일의 파일 투명도
• 더블마진 버그, 까꿍놀이 버그 같은 흔한 버그를 관련 버그 교정 라이브러리

현재는 업데이트되어 ie9.js까지 제공한다.각각의 버전들이 지원하는 것들을 살펴보려면 Demo를 확인하자.

HOME

http://code.google.com/p/ie7-js/

DOC

Using the IE7 Script

IE7-js 사용법

아래와 같이 CDN을 이용하든가 직접 코드를 홈페이지에서 다운로드하여 연결한다. 계속 버전이 올라 현재는 ie9.js가 최신버전이고 하위버전들을 포함하지 않아도 된다.

IE7.js

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<![endif]-->

IE8.js

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->

IE9.js

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

IE6 PNG 투명화 문제 해결

ie7.js는 IE6에서 PNG 파일의 투명 부분을 회색으로 표시하는 오류에 대해서도 해결을 한다. 파일이름이 파일명-trans.png라고 되어있는 파일에 한해서만 투명효과가 적용되도록 처리한다.

만일 모든 PNG 파일에 적용되도록 하려면 아래와 같이 전역 변수를 설정해 ie7.js를 삽입하기 이전에 선언해주면 된다.

var IE7_PNG_SUFFIX = ".png";

또 다른 방법으로는 삽입하는 ie7.js 구문안쪽에 선언해도 된다.

<script src="IE7.js">IE7_PNG_SUFFIX=".png";</script>

기본적으로 PNG는 뻗어나간다(stretched). 만일 이것을 끄려면 아래처럼 no-repeat 속성을 설정하면 된다.

div.example {
  background: url(my-trans.png) no-repeat;
}

불행히도, ie7.js에서는 투명 배경 이미지는 background-repeat 사용이 안되고 background-position를 이용해 위치를 정할수 도 없다.