IE11에서 레이아웃이 개떡이 된다길래 확인해 보니까 display의 grid속성이랑 css의 calc는 지원하면서 var은 지원하지 않음.

시발시발하면서 서버 단에서 IE11이면 IE11과 호환되는 css를 보내려고 했음.

근데 고작 IE11때문에 css를 두벌 만들자니 계속 요구사항이 변하면서 디자인이 계속 바뀌는 도중인데,

두 벌 만들면 디자인 수정할 때 IE11용css도 수정해서 확인해야 하니 일거리가 두배가 된다는 게 너무 싫었음.

1. var 키워드 해결

그래서 php 스크립트 파일을 하나 생성한 뒤에 IE11이면 var키워드를 이용해서 상수?를 사용한 부분을 전부 대치해서 출력하도록 만듦.

이렇게 하면 css는 여전히 한 벌이니 다른 문제가 생길 때까지는 array요소만 추가하거나 변경해서 재사용할 수 있음


2. grid문제

IE11은 grid가 아니라 -ms-grid가 있더라. 그래서

먼저 -ms-grid를 지정하고 다음에 grid를 지정함. 이렇게 하면 IE11외의 브라우저는 -ms-grid를 이해 못하니 무시하고 아래쪽의 grid가 먹히고

IE11는 -ms-grid가 먹힌 후 해석못한 grid를 무시하게 됨.

그래도 IE11은 IE8 호환하는 것보다는 많이 편하다.