Bootstrap 3
ref.1 에 의하면 bootstrap ver. 2 까지는 IE7 까지 지원했지만 ver.3 부터는 css 를 많이 사용해서 IE9 이하버전에서 화면이 일정하지 않을 수 있다고 한다.
ref. 2 에서도 호환성을 위해서라면 ver. 2 가 낫다고 얘기 한다.
bootstrap 의 호환성을 살표보기 위해 Bootstrap site 의 Browser support 항목(아래링크)을 살표보자.
IE 의 hasLayout
IE 에 있는 hasLayout 에 대한 개념을 알아볼 수 있다. 글에 따르면 hasLayout 이 true 일 때 표준에 가깝게 rendering 이 된다고 한다.- wystan's tales > hasLayout 속성과 홀리 핵(Holly hack)
- On having layout — the concept of hasLayout in IE/Win
Bootstrap 3 과 IE 8 이하 버전
IE 7 에 대해 호환이 되도록 하는 방법을 ref. 5 에서 알려준다.Respond.js
respond.js 를 사용해서 IE 8 과 그 아래 버전에서 media query 를 사용할 수 있게 해주는 방법이다.참고로, respond homepage > How's it work? 에 보면 css 를 보고, 그 중에서 @media query 를 찾는다고 한다. 그래서 이 .js 는 css <link> 이후에 넣어줘야 한다.
HTML5shiv
HTML5shiv 를 사용해서 IE 7, 8 에 대한 호환성을 갖을 수 있다. shiv 가 javascript 로 HTML5 의 element 를 구현해 준다.
아래 경로에서 download 할 수 있다.
IE9.js
html5shiv 와 비슷한 ie9.js 라는 것이 있다. 두개에 대한 설명은 아래 page 에서 확인할 수 있다.윗 글에서는 html5 의 full support 를 위해서는 html5shiv 를 사용하라고 한다.
CSS3Pie
CSS3Pie : IE 7, 8 에서 rounded-corner 를 표현하기에는 성능이슈가 가장 적은 편이라고 얘기함.bootstrap-ie7.css
bootstrap 을 IE 7 에서 동작하도록 해주는 css 이다. 자세한 사항은 ref. 3 참고하자.
.htc file[ref. 4]
border-box 를 사용할 수 있게 해준다. behavior 를 추가해야 한다.
css 에
- *behavior: url(/scripts/boxsizing.htc);
* 이 붙은 property 의 추가로 IE 6, 7 에서만 사용할 수 있다.
IE7 에서 box-sizing-polyfill(boxsizing.htc), respond.js 와 관련해서 CPU 점유율이 높아지는 현상이 발생한다고 한다. 이 경우에 대한 해결책들을 이야기 하고 있다.
setBorderBoxMinHeight 에서 element 가 없다는 error 가 나온다. 그것에 대한 해결책은 아래를 참고하자.
댓글 없음:
댓글 쓰기