본문으로 바로가기

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

Box Sizing Polyfill 소개

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

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



댓글을 달아 주세요

  1. BlogIcon wallel 2015.12.29 13:53 신고

    본문과 좀 안맞는 질문입니다만...

    box-sizing 쓸 때 *:before, *:after 에도 추가하는데, 이유가 있는건가요?

    저는 불필요하다고 생각하는데 말이죠...

    • BlogIcon 흉내쟁이 2015.12.29 15:56 신고

      음, * 선택자가 :before 나 :after도 커버가 되던가요? 저도 오래전부터 습관적으로 써오다보니 깊게 생각안해봤는데 테스트해보시고 알려주세요 흐흐~

    • BlogIcon wallel 2015.12.29 22:42 신고

      *:before, after 개발자 도구로 넣고 빼고 해봤는데 미묘한 차이를 발견했습니다.

      div:after 로 추가한 border-right: 1px solid #ddd; 이 속성의 선이 박스 안/밖으로 들락날락 하네요 ㅋㅋ

      이거 외엔 아직 잘 모르겠어요, 더 테스트 해봐야 알거같네요~

    • BlogIcon wallel 2015.12.29 22:43 신고

      * 가 전부 커버하진 못하나봐요 ㅋ

티스토리 툴바