조회 수 12469 추천 수 0 댓글 0

웹이 널리 보급된 이유를 개발자 입장에서 찾으라면 html, css와 같은 비교적 간단한 문법과 jsp, php, asp 같은 server-side 언어의 발전을 들 수 있을것이다. 하지만 이 모든것의 배경에는 제작과 사용을 간단하게 만든 플랫폼이 있고, 이것이 바로 웹브라우저이다. 하지만 이런 개방성 만큼 여러 종류의 브라우저가 발전하면서 호환성문제가 대두되었고 이는 다시 개발자로 하여금 양날의 칼로 머리를 쥐어짜게 만들었다.
크게 보면 1. 서로 다른 종류의 브라우저와의 호환성 2. 같은 브라우저의 버전별 호환성 으로 나눌 수 있는데 이 두가지 모두에 있어 최고의 골치는 두말할것 없이 Internet Explorer, IE 다. 특히 10살이나 먹은 IE6은 웹개발자에게는 “악마” 같은 존재이다.

이런 IE에서 버전별로 다르게 보여지는 문제를 해결하기 위한 가장 효율적인 방법은 문제가 있는 부분만 브라우저에 맞게 수정하는 방법이다.
즉, 페이지를 표준에 맞게 작성한 후 브라우저별로 테스트 한 후 특정 브라우저에서 문제가 발생하면 그 브라우저에서만 별도로 제작해둔 css를 읽어 재정의되어 수정하도록 하는 방법이다. 아래는 IE 특정 버전별로 파일을 로딩하는 방법이다.

모든 IE에서만 적용하려면

<!--[if IE]> <link rel="stylesheet" type="text/css" href="ie-only.css" /> <![endif]-->

IE6 버전에서만 읽어들이도록

<!--[if IE 6]> <link rel="stylesheet" type="text/css" href="ie6-only.css" /> <![endif]-->

IE7 버전에서만 읽어들이도록

<!--[if IE 7]> <link rel="stylesheet" type="text/css" href="ie7-only.css" /> <![endif]-->

조금 더 정교하게.

IE7 버전보다 낮은 버전에서만 (7버전 제외)

<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="ie7-less-than.css" /> <![endif]-->

IE7 버전보다 낮은 버전에서만 (7버전 포함)

<!--[if lte IE 7]> <link rel="stylesheet" type="text/css" href="ie7-less-than-equal.css" /> <![endif]-->

IE7 버전보다 높은 버전에서만 (7버전 제외)

<!--[if gt IE 7]> <link rel="stylesheet" type="text/css" href="ie7-greater-than.css" /> <![endif]-->

IE7 버전보다 높은 버전에서만 (7버전 포함)

<!--[if gte IE 7]> <link rel="stylesheet" type="text/css" href="ie7-greater-than-equal.css" /> <![endif]-->

기타 다음과 같은 문구도 가능하다.

 

IE가 아닌 다른 브라우저만

<!--[if !IE]> <link rel="stylesheet" type="text/css" href="not-sucks.css" /> <![endif]-->

IE6.5 버전에서만 읽어들이도록

<!--[if IE 6.5000]> <link rel="stylesheet" type="text/css" href="ie6.5-only.css" /> <![endif]-->

gt 는 greater than , gte 는 greater than or equal, lt 는 less than, lte 는 less than or equal 의 약자이다. 다음과 같이 스크립트도 삽입할 수 있다.

<!--[if IE 6]> <script type="text/javascript"> alert("아직 IE6을 쓰는거야?"); </script> <![endif]-->

이정도면 대충 큼지막한 것들은 해결할 수 있으리라.

 

browser_icons.jpg

출처 http://blog.naver.com/fbwoejr123/50102957276

 

[다른 방법]

/* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* Enter your style code */
}

/* IE6,7,9,10 */
@media screen and (min-width: 640px), screen\9 {
    /* Enter your style code */
}

/* IE6,7 */
@media screen\9 {
    /* Enter your style code */
}

/* IE8 */
@media \0screen {
    /* Enter your style code */
}

/* IE6,7,8 */
@media \0screen\,screen\9 {
    /* Enter your style code */
}

/* IE9,10 */
@media screen and (min-width:0\0){
    /* Enter your style code */
}

IE10미만은 이제 버려야한다고 생각한다. IE 9 공식버전 정식 출시일이 2011년 3월이다.  IE 10 플랫폼 프리뷰를 2011년 4월에 출시했으니 여하튼 IE는 없어졌으면 좋겠다. 참고로 IE9이하는 좀 큰 기업의 사이트마저 지원하지 않는 곳이 많다. 따라서 특이사항이 없다면 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) 해당 코드로 IE 10+만 해줘도 충분할 것 같다.

TAG •
    댓글이 하나도 없네요ㅠㅠ
    자료가 도움이 되었다면 댓글과 평가 부탁합니다.
?

Html Tips

홈페이지 작성시 요긴하게 사용되어지는 Html들을 정리해 놓았습니다

List of Articles
번호 제목 글쓴이 날짜 조회 수
» IE 버젼별로 css 따로 적용하는 방법 file 팔공산 2011.02.17 12469
37 마퀴태그의 기본 팔공산 2010.02.06 9815
36 이미지 바꾸기 소스 1 감로수 2009.06.06 10253
35 익스6에서만 작동되게하는 css구문 팔공산 2009.02.19 9855
34 CSS 기초 깨우치기 1 팔공산 2008.10.12 9250
33 CSS 사용시 익스플로러 버그 해결하기 file 팔공산 2008.07.19 8769
32 CSS : 글꼴과 텍스트(2) - 장식과 자간 및 줄간 1 file 팔공산 2008.07.19 12532
31 기본적인 태그 (링크걸기)| 1 팔공산 2008.07.12 9122
30 가장 기본적인 태그들 팔공산 2008.07.12 6964
29 자신의 홈에 프린트버튼을 넣자 2 팔공산 2008.07.12 6973
28 테이블(셀) 깨지지 않는 CSS 1 팔공산 2008.07.12 8501
27 날짜 매개변수 1 팔공산 2008.07.12 7151
26 이미지 없이 그라데이션효과 주기 팔공산 2008.07.12 8210
25 자신의 홈페이지 단어를 더블클릭하면 네이버로 해당단어 검색을 1 팔공산 2008.07.12 7378
24 뒤로..앞으로..새로고침 버튼 넣기 팔공산 2008.07.12 9338
23 ( align="absmiddle" ) 이미지와 글자 높낮이가 다를때 관해서 3 file 팔공산 2008.04.27 12130
22 붙어야 할 이미지가 붙지 않을때. file 팔공산 2008.04.19 7357
21 사각박스 코너를 이미지없이 둥글게 만드는법 file 팔공산 2008.04.08 8200
20 CSS로 바꾸어 쓰는 HTML태그!.. [XHTML약간^^;] 1 팔공산 2008.04.04 7723
19 네이밍 가이드 팔공산 2008.04.04 5793
목록
Board Pagination Prev 1 2 3 Next
/ 3
서버에 요청 중입니다. 잠시만 기다려 주십시오...