Twitter BootstrapレスポンスレイアウトがIE8以下で動作しません

Question

Twitterのブートストラップを使用してサイトを開発しました。IE8以降のすべてのIEブラウザでレスポンシブなレイアウト部分が壊れているようです。これらのブラウザではサポートされていませんか？

Answer 1

IE8以降で@mediaクエリをサポートする場合は、
css3-mediaqueries-jsをご確認ください。 はWouterのファンデグラーフによって

CSS3-mediaqueries.jsはIE 5+、Firefoxの1+およびSafari 2を透過的に、テストを解析し、CSS3メディアクエリを適用するようにするJavaScriptライブラリです。 Firefox 3.5+、Opera 7+、Safari 3+、Chromeは既にネイティブサポートを提供しています。

PS：私はを使用しています。このブートストラップはこのプラグインで素晴らしいです！お役に立てれば！ :)

Answer 2

パフォーマンスが向上し、構造が複雑すぎないようにしたい場合。

あなたは著者からRespond.JS

を試すことができます。

これはそこだけCSS3メディアクエリポリフィルスクリプトではありません。しかし、それは まあまあ最速かもしれません。

さらに堅牢なCSS3メディアクエリのサポートをお探しの場合は、 チェックアウトhttp://code.google.com/p/css3-mediaqueries-js/があります。テストでは 複雑な レスポンスデザイン（ファイルサイズとパフォーマンスの両方）をレンダリングするとスクリプトがかなり遅くなることがわかりましたが、実際には はこのスクリプトよりも多くのメディアクエリ機能をサポートしています。大きな帽子 投稿者にヒント！ :)

Answer 3

私は上記のすべての方法を試してみましたが、それはとてもゆっくりと動作します。私は次のアプローチを提供します。 @mediaを含むcssファイルを分解し、各ルールを別々のファイルに挿入する必要があります。次に、ブラウザ画面の幅に応じて、条件付きで各ファイルをアップロードする必要があります。このすべてのアクションは、cload.jsというスクリプトを実行します。 cload.jsをダウンロードし、使用方法をお読みください。here

Answer 4

You should all read this forum post

これは、IEとTwitterのブートストラップの課題を非常に明確に説明しています。また、実際に動作するソリューションも提供します。

引用：

ここでの問題は、 http://twitter.github.com/bootstrap/などの公式ページに、それはすべてのブラウザ 、でもIE7で動作するように主張していることです。理論的には可能ですが、 を開発するときには、 の設計と開発が必要です。

Answer 5

私はでhtml5shivを使用：これは私のために働いた

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

。バワーを使用しても入手できます。

Answer 6

これらは、私はこの作業を取得するために要した手順です。

は、IE8でresponse.jsデモページを見てみましょう：
https://rawgithub.com/scottjehl/Respond/master/test/test.html

それはとても応答をダウンロードしてローカルで作業を取得することを動作します.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宣言。