CSS 크로스브라우징 문제 해결 핵이나 필터 이용

대부분은 css유효성 검사는 통과할 수 없습니다.

각각의 브라우저마다 CSS를 완벽하게 웹표준에 맞춰서 지원하지 못하기 때문입니다.

그래서 아직은 크로스브라우징 문제를 핵이나 필터를 이용하여 해결하고 있습니다.

브라우저마다 CSS가 동일하게 적용되지 않습니다.

 

1. *html 필터(또는 스타핵)

-window IE4~6 / Mac IE4~5 에서만 사용

 

*html p { color:red; }

 

2. 언더스코어 핵 : IE4~6

p {_color : red; }

3. 해시핵 : IE4~7

p { #color:red; }

 

4. 닷핵 :IE6~7

p { .color:red; }

 

5. IE 8에서만 적용 : div { width/***/:100px; } - IE 8에서만 적용

 

6. IE 8을 포함한 IE버젼에서만 적용 : div { width:100px＼; } - IE에서만 적용

 

7. IE 7, Opera 적용 : *+html body div { width:100px; }

      - IE 7, Opera 8 이후 버전 적용, Opera를 배제한 IE7전용으로 하고 싶을 때는

         *+html>/**/body 로 Opera 전용 속성 기술

 

8. IE 7 적용 : *:first-child+html div { width:100px; }

      - IE 7에서만 적용되고, 이외의 브라우저는 앞에서 기술한 셀럭터의 속성에 적용

 

9. xmlns핵 : Mozilla, Firefox, Opera, Safari등 속성 선택자를 지원하는 브라우저에 적용

 html〔xmlns〕 div { width:300px; }

 

 조건 주석문 : IE5이상 모든 버전

-인터넷 익스프롤러에만 사용할 수 있는 핵으로, 기존의 주석문을 다르게 해석하도록 확정한 비표준 방식

-if함수 처럼 조건을 주어 해당 조건에 만족하는 경우에만 수행, 그렇치 않으면 주석으로 인식

-IE 제외한 나머지는 주석문으로 인식되기 때문에 CSS유효성 검사 통과

 

 

<!--[if IE 6]>

<link rel="stylesheet" type="text/css" href="css/ie6.css"  >

<![endif]-->

 

<!--[if IE 7]>

<link rel="stylesheet" type="text/css" href="css/ie7.css">

<![endif]-->

 

10. html>body div {width:100px;} : IE7,IE8 에서만 적용