[css] 크로스브라우징

마이크로소프트에서도 포기한 IE를 아직도.. 우리나라는 사용하고 있기 때문에 예전에 배웠던 대로 IE8,9는 맞출 필요는 없지만 적어도 IE10+이상은 맞춰야 한다.

 

float:left의 남용이 웹브라우저 최적화를 저하시키기도 해서 지양하고 있기 때문에, 웹브라우저의 버전업과 함께 stylesheet도 점차 발전해가고 그에 맞춰 편하게 레이아웃을 조정할 수 있도록 나온 display:grid를 사용하고 싶지만 IE10에서는 지원하지 않기 때문에.. ㅜㅜ 그나마 핵사용이라도 해서 display:flex로 레이아웃 스타일을 활용하고 있다.

 

하지만 아무리 맞춰도.. 한계는 있는 법.

 

웬만하면 크롬/웨일 막 요런 거 쓰자..

 

1. css에서 IE만 반영 

/* 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 */
} 

 

2. HTML에서 IE만 반영하는 stylesheet 링크 사용

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


<!--[if IE]>
<style>
    /* Enter your style code */
    /* 몇개 수정할 경우 사용, 웬만하면 링크 걸자. 브라우저 속도를 위해 */
</style>
<![endif]--> 

 

3. 접두어사용

 -ms-      : Edge / Internet Explorer에서 지원
 -moz-    : Firefox 지원
 -webkit- : Google 크롬, Safari에서 지원
 -o-        : Opera에서 지원

 

 

 

 

 

 

 

docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537512(v% 3d vs.85)