web-dev-qa-db-ja.com

IE8でBootstrap=レスポンシブレイアウトを機能させる方法

私はしばらく検索して、何人かの人々がそれを機能させていることを発見しましたが、彼らは誰もコードサンプルを提供しません。

私は彼らの提案を試みましたが、それは私にはうまくいきませんでした。提案により、私は<meta http-equiv="X-UA-Compatible" content="IE=Edge" />、respond.js、またはcss3-mediaqueries-jsを追加しようとしましたが、どれも助けになりませんでした。

これは jsfiddle です。IE8で表示すると、ブラウザーの幅に関係なく、aとbの両方が同じ行に表示されます。

ただし、Chrome、FF、IE9以上で表示すると、ブラウザの幅に応じて、異なる行または単一の行に表示されます。

[〜＃〜] update [〜＃〜]

私は一度にそれらの1つ（css3-mediaquery、html5shivと応答）のコメントを解除しようとしましたが、それらのどれにも運がありませんでした。

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="http://netdna.bootstrapcdn.com/Twitter-bootstrap/latest/css/bootstrap-combined.min.css" rel="stylesheet">
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="span4">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </div>
            <div class="span8">
                LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT.
            </div>
        </div>
    </div>

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/Twitter-bootstrap/latest/js/bootstrap.min.js"></script>

    <%--<script type="text/javascript" src="js/css3-mediaqueries.js"></script>--%>
    <%--<script type="text/javascript" src="js/html5shiv.js"></script>--%>
    <%--<script type="text/javascript" src="js/respond.js"></script>--%>

    </script>
</body>

</html>
twitter-bootstrapinternet-explorer-8responsive-designmedia-queriesfluid-layout
19
Ray Cheng

IE 8は、すぐに使用できるメディアクエリをサポートしていません。

この質問 および この質問 に基づいて、 css3-mediaqueries-js または 応答 。

31
Jason Towne

html5shiv を使用してみてください。これは基本的にHTML5 IE有効化スクリプトで、bootstrap working in IE 6,7および8。これは、次のように直接ホットリンクすることもできます。

<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<body>要素の前に（つまり、<head>に）含める必要があります

10
Akshay Raje

あなたの問題は、外部ドメインにあるCSSスタイルシートでrespond.jsを使用しようとしています。 Respond.jsはIE6-IE8のメディアクエリを修正します。

https://github.com/scottjehl/Respond#cdnx-domain-setup

Respond.jsは、AJAXを介してCSSの元のコピーを要求することで機能するため、CDN（またはサブドメイン）でスタイルシートをホストする場合は、クロスドメイン通信を有効にするためにプロキシページをアップロードする必要があります。

デモについては、cross-domain/example.htmlをご覧ください。

Upload cross-domain/respond-proxy.html to your external domain
Upload cross-domain/respond.proxy.gif to your Origin domain
Reference the file(s) via <link /> element(s):

<!-- Respond.js proxy on external server -->
<link href="http://externalcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />

<!-- Respond.js redirect location on local server -->
<link href="/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />

<!-- Respond.js proxy script on local server -->
<script src="/path/to/respond.proxy.js"></script>

クロスドメインのセットアップに問題がある場合は、respond-proxy.htmlにクエリ文字列が追加されていないことを確認してください。

8
Craig London

次によると： https://drupal.org/node/2173441

IE8でBootstrapサイトを機能させるには、次の手順に従う必要があります。

  1. Respond.jsモジュール を使用してRespond.jsファイルをインストールします。
  2. ロードするCDNを無効にしますBootstrap=ファイル。
  3. Bootstrap= Bootstrap Library Module を使用してローカルでファイルをインストールします。
  4. /admin/config/development/performanceのCSSファイルを集約および圧縮します
4
ohho

Internet Explorer 8または940pxのクラス「コンテナ」の幅よりも小さい場合。しかし、Internet Explorer9 +、Firefox、Google Chromeなどでは、「contianer」クラスの幅は1170pxと呼ばれています。

同じ問題はZurb Foundationにもあります。

クライアントがIE8で表示するWebサイトを考慮しないように要求した場合<

2
Selva

Bonesフレームワークで動作する、私が取り組んでいるソリューションを次に示します。ブートストラップで非常に簡単に使用できます。

https://github.com/gamsim/ieresponsify

2
Simon Gamble

すべてのスタイルシートの「リンク」タグの後、そしてヘッドタグclosed（）の直前にこれを試してください。これは「ヘッド」タグ内の最後を意味します。このフォーマットはすべてのWebサイトで99％動作します。ただし、一部のdrupal=bootstrap=テーマは機能しません。

すべてをウェブサイトのローカルフォルダーに保存してください。CDNは使用しないでください。

 <!--[if lt IE 9]>
 <script type='text/javascript' src="/sites/all/themes/bootstrap_subtheme/js/css3-mediaqueries.js"></script> 
 <script type='text/javascript' src="/sites/all/themes/bootstrap_subtheme/js/html5.js"></script>
 <script type='text/javascript' src="/sites/all/themes/bootstrap_subtheme/js/respond.min.js"></script>
 <![endif]-->
1
Ankur Saini

IE 8でのCROSS DOMAIN cssロードの問題は、@ Akshay Rajeおよび@ Craig Londonが示唆するように解決されました。 。

それに追加するには、respond.jsまたはrespond.min.jsを追加する必要がありますbeforerespond.proxy.jsセットアップが機能します。

1
Prasoon Srivastava

たいていの場合、CSSをコンテンツデリバリーネットワーク（[〜＃〜] cdn [〜＃〜]からoss.maxcdn.comやcdnjs.cloudflareのようなメディアクエリ（ブートストラップおよびその他のファイル）で読み込みます。 com）。 Respond.jsは、外部から読み込まれたCSSでは機能しないため、サーバーからBootstrap CSS（またはメディアクエリを含む他のCSS）を読み込む必要があります。

1
TeeJay