[CSS] IE11에서 max-width 오류

프로젝트를 진행하고 있는 도중 미디어 쿼리가 필요하여

@media only screen and (max-width: 900px) {
  .dashboard-top .banner .banner-img {position:relative; width: 80%;}
}

와 같이 작성 하였습니다.

문제는 900px 이상의 창에서 띄었는데도 불구하고 해당 CSS가 적용되는 문제가 발생을 하더군요.

참 골치가 아프더군요 (역시..  IE가 어디가겠어... )

역시 모를 땐 구글링...

그리고 찾은 결과 입니다.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .dashboard-top .banner {width:100%;height: 271px;}
  .dashboard-top .banner .banner-img {height:271px;position:absolute;right:0;}
}

와 같이 적용하시면 제대로 적용 된 것을 확인 하실 수 있을 거예요!.

참고 : https://javascript.tutorialhorizon.com/2016/09/27/making-max-width-work-in-internet-explorer/