ie9 이하의 브라우저에서 css 인식 문제

일하다 보면서 ie9에서 레이아웃이 깨지는 현상이 있었다. (현재 라이프케어는 ie8이하의 브라우저에서는 접속이 불가능하다.)

 개발자도구를 열어보면 ie9에서는 셀렉터가 잡힌게 아예 없는 듣도 보도 못한 현상이었다.

 그래서 검색을 해보니...

http://teilar.tistory.com/entry/ie9-%EC%9D%B4%ED%95%98-%EB%B2%84%EC%A0%84%EC%9D%98-%EC%A0%9C%ED%95%9C

ie9 이하에서는

1. css 파일하나의 크기가 288kb 를 넘어설 경우,

2. css 셀렉터의 갯수가  4096개를 넘어설 경우,

3. import의 갯수가32개를 넘어설 경우 

css를 인식하지 못하는 버그가 있다는 충격적인 결과를 찾아냈다.

현재 운영되고 있는 방식은 css파일들을 따로 넣어놓으면 출력할때 css파일을 하나로 압축하여서 출력하도록 관리하고 있었다. (실제로 압축이 제대로 이루어지진 않았고 파일이 하나로만 되어서 출력되고 있었다.)

파일 용량이 500kb를 넘어섰고 셀렉터 갯수를 차마 모두 셀수가 없었다.

그래서 불필요한 css파일을 압축할때 제거하고 파일 용량을 줄여서(250kb대) 해보니 정상적으로 화면이 나왔다.

조심 또  조심...