크로스브라우징 CSS핵

 

 

 

퍼블리싱을 하다보면 크로스브라우징을 신경쓰지 않을 수가 없습니다!

 

여기서 크로스브라우징이란 어느 브라우저에서든 동일하게 보여지도록 구현하는것을 이야기하는데

저는 크로스브라우징에 문제가 생겼을때 최후의 수단으로 CSS핵을 사용하곤 합니다.

그럼 브라우져 버전별로 알고있는 핵을 적을테니 필요하신 분들은 참고하세요~

<style>
div { .height:300px; } 
/*닷핵 (.) : IE 6~7*/

div { _height:300px; } 
/*언더스코어 핵 (_) : Win IE 4~6*/

div { #height:300px; } 
/*해시 핵 (#) : IE 5.5~6, Mac IE 5, Opera 7, Mozilla 계열, Firefox*/

*html div { height:300px; } 
/*스타 핵 : Win IE 4~6, Mac IE 4~5*/

html*div { height:300px; } 
/*스타7 핵 : Win IE 5.5~6, Mac IE 5, Safari*/

html[xmlns] div { height:300px; } 
/*xmlns 속성 핵 : Mozilla, Firefox, Opera, Safari 등 속성 선택자를 지원하는 브라우저*/

:root div { height:300px; } 
/*root 가상클래스 핵 : Mozilla, Firefox, Mac IE 5, Safari 등 가상클래스를 지원하는 브라우저*/

div { height/*\**/:300px; } 
/*IE 8에서만 적용 : IE 8*/

div { height:300px\; } 
/*IE 8을 포함한 IE버젼에서만 적용하기 : Only IE*/

*+html body div { height:300px; } 
/*IE 7, Opera 적용하기 : IE 7, Opera 8 이후 버전*/

div { height/**/:300px; } 
/*IE 6 제외시키기 : Win용 IE 6에서는 적용 제외*/

html>body div { height:300px; } 
/*IE 7, IE 8에 적용하기 : IE 7, IE 8에서만 적용*/

@-moz-document url-prefix(){ div } 
/*파이어폭스만 적용*/

@media screen and (-webkit-min-device-pixel-ratio:0) { div } 
/*크롬만 적용*/
</style>

 

 

위 소스는 예전에 공부한다고 서칭해서 정리해 뒀던건데...
안써본 것들도 몇개있네요.