Box Sizing Polyfill - 박스모델 크로스브라우징

최근에는 박스모델의 계산을 손쉽게 도와주는 box-sizing: border-box를 많이 사용하는데 이는 IE8 이상에서만 작동합니다. 구형 브라우저에서 이를 지원하는 방법에 대하여 알아봅니다.

Box Sizing Polyfill 소개

IE7 이하버전에서 CSS의 box-sizing을 구현하기 위해서 필요한 폴리필이다.

REPO

https://github.com/Schepp/box-sizing-polyfill

Box Sizing Polyfill 사용법

boxsizing.htc 파일을 서버에 올리고 IE7 이하 버전에서만 적용하기 위해 코드를 추가한다.

<!--[if lte IE7]>  
  <link rel="stylesheet" href="css/ie.css">  
<![endif]-->  

ie.css 파일을 작성한다.

* {
  behavior: url(경로/boxsizing.htc);
} 

경로에 주의해야 하는데 HTML 파일의 상대경로로 작성해야 한다.

box-sizing을 작성할때 pseudo-element 에도 *:before, *:after 적용하지만, IE7 이하는 지원하지 않으니 필요치 않다.

서버에서 .htc 파일에 대한 content-type 에 대한 설정이 되어있어야 한다.

AddType text/x-component .htc