IE 하위버전을 위한 팁!
Published in
3 min readFeb 29, 2016
프로젝트를 하다보면 IE 하위브라우저가 늘 골치가 아프다.
특히 IE8은 누구나 공감하듯이 헉 소리 나는 부분이 아닐까.
IE 하위버전을 위한 팁을 정리해보았다.
1. modernizr 라이브러리와 respond 라이브러리
전반적인 그리드가 페이지가 깨져 보인다면?<HEAD>에서 선언되는 자바스크립트 라이브러리를 확인해보자.
/[if lt IE 9]
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>다른 자바스크립트 라이브러리보다 먼저 선언이 되어야 한다.
[ Modernizr ]
- Modernizr는 사용하는 브라우저에서 HTML5와 CSS3 기능들의 지원여부를 점검하는 자바스크립트 라이브러리이다.
- true/false로 반환되며, if(Modernizr.test) { // } 형태로 작성한다.
[ Respond ]
- IE6 ~ IE8에서 미디어쿼리를 지원하는 라이브러리이다.
2. IE9/IE8에서 CSS가 적용이 안 된다면?
작업을 하고 ie에서 테스트를 하는데 부분부분 css가 깨진다면 ?
아래의 리스트를 확인해보면 된다.
- CSS 파일 크기가 288kb를 넘는가?
- selector가 4096개를 넘는가?
- @import 를 사용하여 32개가 넘는 파일을 불러오는가?
- css파일 안에 다른 css파일을 import하는 파일을 import하는 경우가 있는가? ( test.css > test_2.css > test_3.css )
css파일을 나누거나 합치는 방법을 통해 해결가능하다.
3. IE8을 위한 css 팁
ie8에서는 지원하지 않는 css가 많아서 css hack이 필요한 경우들이 있다. 필수요소이거나 아예 ie8에서 깨지는 방법을 회피하는 방법을 사용해보자
- background-size: cover
- backgroundsize.min.htc 사용
- css에 filter 추가
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src=’’,sizingMethod=’scale’);
-ms-filter: “progid:DXImageTransform.Microsoft.AlphaImageLoader(
src=”,sizingMethod=’scale’)”;2. background-color: rgba(255,255,255,0.6)
- opacity가 들어간 이미지로 작업
- css에 filter추가
filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";3. iframe z-index 이슈 // iframe src 맨 뒤에 ?wmode=transparent 추가
