Twitter Bootstrap 반응 형 레이아웃은 IE8 이하에서 작동하지 않습니다.

Twitter Bootstrap 반응 형 레이아웃은 IE8 이하에서 작동하지 않습니다.

---

트위터 부트 스트랩을 사용하여 사이트를 개발했는데 IE8 이하의 모든 IE 브라우저에서 반응 형 레이아웃 부분이 손상된 것 같습니다. 이 브라우저에서는 지원되지 않습니까?

---

@mediaIE 8 이하에서 쿼리 를 지원 하려면
css3-mediaqueries-js를 확인하세요 .

CSS3 - mediaqueries.js 에 의한 그라프 데르 WOUTER 밴 CSS3 미디어 쿼리를 투명하게 구문 분석, 테스트 IE 5 +, 파이어 폭스 1+와 사파리 2를 만들고 적용 할 수있는 자바 스크립트 라이브러리입니다. Firefox 3.5 이상, Opera 7 이상, Safari 3 이상 및 Chrome은 이미 기본 지원을 제공합니다.

추신 : 저는 이 플러그인과 함께 Twitter Bootstrap 을 사용 하고 있습니다. 도움이 되었기를 바랍니다! :)

---

더 나은 성능을 원하고 구조가 너무 복잡하지 않은 경우.

Respond.JS 를 사용해 볼 수 있습니다.

저자로부터 :

이것이 유일한 CSS3 미디어 쿼리 polyfill 스크립트는 아닙니다. 그러나 그것은 가장 빠를 수 있습니다.

보다 강력한 CSS3 미디어 쿼리 지원을 찾고 있다면 http://code.google.com/p/css3-mediaqueries-js/를 확인하세요 . 테스트에서 복잡한 반응 형 디자인 (파일 크기 및 성능 모두)을 렌더링 할 때 스크립트가 눈에 띄게 느리다는 것을 발견했지만 실제로는이 스크립트보다 훨씬 더 많은 미디어 쿼리 기능을 지원합니다. 저자에게 큰 모자 팁! :)

---

이 작업을 수행하기 위해 취한 단계는 다음과 같습니다.

IE8의 response.js 데모 페이지를 살펴보십시오 :
https://rawgithub.com/scottjehl/Respond/master/test/test.html

그것은 작동하므로 response.js를 공급 업체 / 자산 또는 유사한 곳으로 다운로드하여 로컬에서 작동하십시오.

로컬 부트 스트랩을 비활성화하고 CSS에서 이것을 시도하십시오.

/*styles for 800px and up @ 16px!*/
@media screen and (min-width: 50em){
  body {
    background: blue;
  }
}

효과가있다!

cdn을 사용하고 있었기 때문에 로컬에서 다운로드하여 호스팅해야했습니다.
http://getbootstrap.com/getting-started/#download

따라서 다음과 같이 작동합니다.

= stylesheet_link_tag 'bootstrap.min.css'
= stylesheet_link_tag 'bootstrap-theme.min.css'
= stylesheet_link_tag 'my-css'
= javascript_include_tag 'respond.min'

또한 모든 @import 선언을 제거해야합니다.

---

위에서 설명한 모든 방법을 시도했지만 작동 속도가 느립니다. 다음 접근 방식을 제안합니다. @media가 포함 된 css 파일을 분해하고 각 규칙을 별도의 파일에 삽입해야합니다. 그런 다음 브라우저 화면 너비에 따라 각 파일을 조건부로 업로드해야합니다. 이 모든 작업은 cload.js 스크립트를 수행합니다. cload.js를 다운로드하고 여기 에서 사용할 수있는 방법을 읽어보십시오.

---

모두이 포럼 ​​게시물을 읽어야합니다 .

IE와 Twitter Bootstrap 간의 문제를 매우 명확하게 설명합니다. 또한 실제로 작동하는 솔루션을 제공합니다.

인용문:

여기서 문제는 http://twitter.github.com/bootstrap/ 과 같은 공식 페이지 에서 IE7을 비롯한 모든 브라우저에서 작동한다고 주장한다는 것입니다. 이론적으로는 그럴 수 있지만 반응 형으로 개발할 때는 특정 프레임을 중심으로 설계하고 개발해야합니다.

---

html5shiv를 다음에서 사용했습니다.

https://code.google.com/p/html5shiv/

이것은 나를 위해 일했습니다. 정자를 사용하여도 가능합니다.

참조 URL : https://stackoverflow.com/questions/10998877/twitter-bootstrap-responsive-layout-does-not-work-in-ie8-or-lower