Twitter Bootstrap 3でのIE8の問題

新しいTwitter Bootstrapを使用してサイトを作成しています。サイトは正常に見え、IE8を除くすべての必要なブラウザーで動作します。

IE8では、モバイルバージョンの要素が表示されているようですが、デスクトップの全画面に表示されます。私が抱えている問題は、Twitterブートストラップが最初にモバイルであることだと思います。そのため、何らかの理由でIE8がこのオプションを採用しています。

また、containerクラスが意図したとおりに最大幅のCSSプロパティを取得していないようです。誰かが私が間違ったことを見ることができますか？

<!-- Favicon -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Bootstrap -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<script src="/SiteFiles/js/modernizr.js"></script>

<!-- CSS -->
<link href="/SiteFiles/css/main.css" rel="stylesheet">

<header>
    <div class="topArea clearfix">
        <div class="container">
            <div class="topLinks">
                <div class="btn-group">
                    <span class="flag" data-toggle="dropdown">&nbsp;</span>
                    <ul class="dropdown-menu">
                        <li><a href="#">Country 1</a></li>
                        <li><a href="#">Country 2</a></li>
                        <li><a href="#">Country 3</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Country 4</a></li>
                        <li><a href="#">Country 5</a></li>
                        <li><a href="#">Country 6</a></li>
                    </ul>
                </div>
                <div class="visible-sm btn-group">
                    <div class="plus" data-toggle="dropdown"><i class="icon-plus icon-2x">&nbsp;</i></div>
                    <ul class="dropdown-menu">
                        <li><a href="#">Parts & Service</a></li>
                        <li><a href="#">Store Locator</a></li>
                        <li><a href="#">Find a Service Centre</a></li>
                        <li><a href="#">Parts List</a></li>
                        <li><a href="#">Tool Vibration</a></li>
                        <li><a href="#">Resource Centre</a></li>
                        <li><a href="#">Media Centre</a></li>
                        <li><a href="#">Register your Tools</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">
                            <button type="button" class="btn btn-default">Where to Buy</button></a></li>
                    </ul>
                </div>
                <div class="topNav">
                    <ul class="hidden-sm">
                        <li>
                            <div class="btn-group">
                                <a href="#" data-toggle="dropdown">Parts & Service</a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Store Locator</a></li>
                                    <li><a href="#">Find a Service Centre</a></li>
                                    <li><a href="#">Parts List</a></li>
                                    <li><a href="#">Tool Vibration</a></li>
                                </ul>
                            </div>
                        </li>
                        <li><a href="#">Resource Centre</a></li>
                        <li><a href="#">Media Centre</a></li>
                        <li><a href="#">Register your Tools</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">
                            <button type="button" class="btn btn-default">Where to Buy</button></a></li>
                    </ul>
                </div>
                <div class="searchArea">
                    <input type="text" />
                    <a href="#" class="goBtn">GO</a>
                </div>
            </div>
        </div>
    </div>
    <div class="mainNavArea">
        <div class="container rel">

            <div class="logo">
                <img src="/SiteFiles/img/logo.png" title="Milwaukee - Nothing but heavy duty" alt="Milwaukee - Nothing but heavy duty" />
            </div>
            <div class="navi">
                <div class="navbar">
                    <div class="container">

                        <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>

                        <!-- Place everything within .navbar-collapse to hide it until above 768px -->
                        <div class="nav-collapse collapse navbar-responsive-collapse">
                            <ul class="nav nav-justified">
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Power Tools</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Power Tools</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Hand Tools</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Hand Tools</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Test & Measurement</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Test & Measurement</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                                <li><span class="dropArrow">&nbsp;</span><span class="topNavPosition">Accessories</span>

                                    <div class="navDrop">
                                        <div class="navDropInner">
                                            <div class="row">
                                                <div class="hidden-sm col-sm-4 col-lg-4">
                                                    <img src="/SiteFiles/img/drill.jpg" alt="" />
                                                </div>
                                                <div class="col-12 col-sm-8 col-lg-8">
                                                    <h2>Accessories</h2>
                                                    <div class="row">
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Cutters</a>
                                                            <a href="#">Levels</a>
                                                            <a href="#">Pliers</a>
                                                            <a href="#">Saws</a>
                                                            <a href="#">Screwdrivers</a>
                                                        </div>
                                                        <div class="col-6 col-sm-6 col-lg-6">
                                                            <a href="#">Snips</a>
                                                            <a href="#">Utility Knives</a>
                                                            <a href="#">Combo Knives</a>
                                                            <a href="#">Hand Tool Accessories</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="#" class="closeNav">X</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <!-- /.nav-collapse -->
                    </div>
                    <!-- /.container -->
                </div>
                <!-- /.navbar -->
            </div>

        </div>
    </div>
</header>

CSSをCDN（bootstrapcdn.com）から取得しました。response.jsはローカルファイルでのみ機能します。したがって、bootstrap.cssのローカルコピーを使用して、IE8でWebサイトを試してください。または読む： CDN / X-Domain Setup

注：https : //github.com/scottjehl/Respond/pull/206も参照してください。

更新：

読んでください：http : //getbootstrap.com/getting-started/#support

さらに、Internet Explorer 8では、メディアクエリのサポートを有効にするために、respond.jsを使用する必要があります。

参照：https : //github.com/scottjehl/Respond

このため、基本テンプレートのヘッドセクションには次の行が含まれています。

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="../../assets/js/html5shiv.js"></script>
  <script src="../../assets/js/respond.min.js"></script>
<![endif]-->

次のMETAタグも設定する必要がありました。

<meta http-equiv="X-UA-Compatible" content="IE=edge"> 

Bootstrap 2から3に移行するときにも同じ問題が発生しました。respond.jsとhtml5shiv.jsがすでにあり、メタをエッジに設定しています。2から3にnavbar要素タイプが変更されたことを私は見逃しました。Bootstrap 2では、ナビゲーションでした。Bootstrap 3ではヘッダーになりました。だから問題を完全に解決するには

<meta http-equiv="X-UA-Compatible" content="IE=edge">

私が私のcssをロードした直後にこれを置きます：

<!--[if lt IE 9]>  
    <script src="~/Content/compatibility/html5shiv.js"></script>
    <script src="~/Content/compatibility/respond.min.js"></script>
<![endif]-->

そして次に変える

<nav class="navbar" role="navigation">
</nav>

に

<header class="navbar" role="navigation">
</header>

おお、そして私はまた追加された

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

これは、Bootstrapサイト自体にあるからです。

私の場合、ブートストラップ縮小CSSが問題の原因でした。（F12開発者ツールを使用してエミュレートされた）IE8でブートストラップ3.0.2を応答可能にするには、以下を行う必要がありました。

1-X-UA-Compatibleフラグを設定します。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

2-bootstrap.min.cssの代わりに、縮小されていないbootstrap.cssを使用します

<link href="/css/bootstrap.css" rel="stylesheet" />

3-respond.js（およびhtml5shiv.js）を追加します

<!--[if lt IE 9]>
  <script src="/js/html5shiv.min.js"></script>
  <script src="/js/respond.min.js"></script>
<![endif]-->

置くrespond.jsページの一番下にあるが、閉じる前にbody、タグを、ここのリンクがあるrespond.jsと、あなたのローカルホストでこのコードを実行します。

https://github.com/scottjehl/Respond

念のため。CSSファイルをロードした後、必ずIE固有のJSファイルをロードしてください。

であなたのCSSのリンクを置くことを忘れてはいけない<head>としてrespond.jsのみかかります。

前述のように、2つの異なる問題があります。1）IE8はメディアクエリをサポートしていません。

BootstrapCDNを使用する場合は、次の例を参考にしてください。

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!--[if lt IE 9]>
    <link href="https://stackoverflow.com//netdna.bootstrapcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
    <link href="img/ie/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
    <script src="js/ie/html5shiv.js"></script>
    <script src="js/ie/respond.min.js"></script>
    <script src="js/ie/respond.proxy.js"></script>
<![endif]-->

また、respond.proxy.gif、response.min.js、およびresponse.proxy.jsをローカルディレクトリにコピーしてください。

確認後：

• DOCTYPE
• X-UA互換メタタグ
• html5shiv.jsとrespond.jsの組み込み（および最新バージョンのダウンロード）
• respond.jsがローカルであること
• File：//からではなく、Webサーバーからのホスティングサイト
• @importを使用しない
• ...

それでもcol-lg、col-md、col-smは機能しませんでした。最後に、ブートストラップへの参照をhtml5shiv.jsおよびrespond.jsへの参照の前に移動し、すべてが機能しました。

ここにスニペットがあります：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Bootstrap Test for IE8</title>

    <!-- Moved these two lines up --> 
    <link href="includes/css/bootstrap.css" type="text/css" rel="stylesheet" />
    <script src="includes/js/bootstrap.js"></script>

    <!--[if lt IE 9]>
      <script src="includes/js/html5shiv.js"></script>
      <script src="includes/js/respond.min.js"></script>
    <![endif]-->    
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4" style="background-color:red;">col-md-4</div>
            <div class="col-md-8" style="background-color:green;">col-md-8</div>
        </div>
    </div>
</body>
</html>

説明から、IE8は標準バージョンであり、作成content="IE=edge"するとページが最上位モードでレンダリングされることがわかります。互換性を持たせるには、に変更しcontent="IE=8"ます。

IE8モードは、W3Cカスケードスタイルシートレベル2.1仕様やW3CセレクターAPIなど、確立された多くの標準をサポートしています。また、W3Cカスケードスタイルシートレベル3仕様（草案）およびその他の新しい標準に対する限定的なサポートも提供します。

エッジモードは、利用可能な最高のモードでコンテンツを表示するようにInternet Explorerに指示します。Internet Explorer 9では、これはIE9モードと同等です。Internet Explorerの将来のリリースでより高い互換性モードがサポートされる場合、エッジモードに設定されたページは、そのバージョンでサポートされる最高のモードで表示されます。Internet Explorer 9で表示すると、同じページがIE9モードでも表示されます。

参照<meta http-equiv = "X-UA-Compatible" content = "IE = edge">は何をしますか？

追加する必要がありました- <meta http-equiv="X-UA-Compatible" content="IE=edge">

私はBootstrap 3を使用していました-ローカルのIEで動作していました。

私はそれをライブに置いたがIEで動作しませんでした。

Bootstrapのテンプレートにコード行が含まれていないだけです。理由はわかりませんが、W3C互換ではないことが原因である可能性があります。

この問題は修正されました。実際、IE7と8は@mediaを適切にサポートしていません。CSSで「col-md- *」クラスをチェックすると、幅はメディア幅992pxで指定されます。新しいcssファイルIEを作成するだけです。例：IE.cssと条件付きコメントを追加します。そして、メディアクエリを使用して、デザインに必要なクラスを直接コピーするだけで完了です。

bootstrapv2からv3に移行するときにも、まったく同じ問題が発生しました。

（私のように）古いspanXをcol-sm-Xに置き換えて移行した場合は、col-Xクラスも追加する必要があります。col-Xは@mediaブロックの外側にあるスタイルなので、メディアクエリのサポートなしで機能します。

コンテナの幅を修正するには、@ mediaブロックの外で自分で設定できます。何かのようなもの：

.container {
  max-width: @container-tablet;
}
@import "twitter-bootstrap/less/bootstrap";

IE 10.0でも同じ問題が発生します。これがOPの問題ではないことはわかっていますが、他の人にとっては役に立つかもしれません。

私の場合、ドキュメントの最初に空の行がありました。

[blank line]
<!DOCTYPE html>
<html lang="es">
...

DOCTYPEとタグの間に空白行がある場合、問題も表示されます。

<!DOCTYPE html>
[blank line]
<html lang="es">

空白行を削除して、マジックX-UA-Compatibleメタがないと、IE 10はサイトを正しくレンダリングし始めました。

PHPとSmartyを使用している場合は、Smartyのコメントに注意してください。これらの問題のある空白行が追加されるためです:-)

私の頭のタグは次のとおりです：

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Bootstrap core CSS -->
    <link href="css/modern-business.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/modern-business.js"></script>
     <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.js"></script>
    <![endif]-->  
</head>

ローカルで試してみたい場合は... localhostを試すか、QAサーバーを作成してコンテンツを設定し、試してください。

ブートストラップ3にはrespond.jsが必要です。jsに挿入して、ヘッダーのhtmlに追加するだけでは、ローカルマシンで機能しません。アクセスが拒否されたと表示されます。IEにはセキュリティ制限があるため、サーバー経由でのみ機能します。：P

私はここですべてのコメントを読み、すべてを試しましたが、Windows 7-Internet Explorer 11（ドキュメントモード：IE8）で動作するようにできませんでした。

そして、それは私がインストールされ、ドキュメントモード（IE8）を実行すると、実際のIE8と同じではないことを気にするようになったのWindows Virtual PCを（Internet Explorer 8を使用してWindows 7を ...とtadaaaa）それが作品の魅力のように！

これを機能させるために、このコードをページの下部に配置しました。

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</body>
</html>

ちょうどヘッドアップとして。私は同じ問題を抱えていて、上記のどれも私のためにそれを修正しませんでした。最終的に、respond.jsが@importを介して参照されるCSSを解析しないことがわかりました。全体をにbootstrap.min.cssインポートし@importましたmain.css。

したがって、@importを介して参照されるメディアクエリを含むCSSがないことを確認してください。

以下の手順で解決しました。

（1）drupal 7用にインストールされたRespond.jsモジュール。（2）モジュールフォルダーの代わりに、ライブラリに設定されたdrupal 7用のlessphpモジュール。（3）（3.1）<meta http-equiv="X-UA-Compatible" content="IE=edge">

（3.2）

<!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
<![endif]-->  

テーマ設定からcdnブートストラップを使用します。

詳細については、私のウェブサイトのブログでdrupalの設計と開発を確認してください。www.devangsolanki.com

Bootstrap 3を使用していて、IE以外のすべてのブラウザーですべてが正常に機能する場合は、以下を試してください。

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

このソリューションを使用する

<!--[if lt IE 9]>
<script src="js/css3-mediaqueries.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" />
<![endif]-->

この文字列は<script src="js/css3-mediaqueries.js"></script>メディアクエリを有効にします。この文字列は<link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" />、ブートストラップフォントを有効にします。

Bootstrap 3.3.5でテスト済み

mediaqieries.jsをダウンロードするためのリンク 。bootstrap-ie7.cssをダウンロードするためのリンク

必ずブートストラップソースを個別にリンクしてください

あなたがスタイルをコンパイルすることに貪欲になることを使用するLESSか、SASSそうしない場合。私のプロジェクトbootstrap.min.cssでは、ファイルの上部にあるメインスタイルに含めました。したがって、すべてのスタイルに対して1つの要求のみが必要です。

そのため、ブーストラップクラスは正しく機能しませんでした。個別に追加すると、期待どおりに動作します。

私は同じ問題に直面し、最初の答えを試しましたが、何かが欠けていました。

Webpackを使用している場合、CSSは、respond.jsでサポートされていないスタイルタグとして読み込まれます。ファイルが必要なため、ブートストラップがCSSファイルとして読み込まれていることを確認してください

個人的に使った extract-text-webpack-plugin

const webpack = require("webpack")
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const path = require("path")

module.exports = {
    context: __dirname+"/src",
    entry: "./index.js",
    output: {
        filename: "./dist/bundle.js",
        path: __dirname
    },
    plugins: [
        ...,
        new ExtractTextPlugin("./dist/bootstrap.css", {
            allChunks: true
        })
    ],
    module: {
        loaders: [
            ...,
            // your css loader excluding bootstrap
            {
                test: /\.css$/,
                loader: "style!css",
                exclude: [
                    path.resolve(__dirname, "node_modules/bootstrap/dist/css/bootstrap.css")
                ]
            },

            {
                // loads bootstrap as a file, change path accordingly if needs be, path needs to be absolute
                include: [
                    path.resolve(__dirname, "node_modules/bootstrap/dist/css/bootstrap.css")
                ],
                loader: ExtractTextPlugin.extract("style-loader", "css-loader?minimize")
            }
        ]
    }
}

それがあなたを助けることを願っています