Twitter Bootstrap 3によるIE 8の問題
私は新しいTwitter Bootstrapを使ってサイトを作成しています。このサイトはきれいに見え、IE8を除くすべての必須ブラウザで機能します。
IE8では、モバイル版の要素を表示しているように見えますが、私のデスクトップの全画面にまたがっています。私が抱えている問題は、Twitterのブートストラップが最初にモバイルになることです。したがって、何らかの理由でIE8がこの選択肢を採用する予定です。
また、containerクラスが意図したとおりにmax-width 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"> </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"> </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"> </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"> </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"> </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"> </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）から手に入れました。respond.jsはローカルファイルに対してのみ動作する。だからあなたのWebサイトをIE8上でbootstrap.cssのローカルコピーで試してみてください。または読んでください： CDN/Xドメイン設定
注参照： https://github.com/scottjehl/Respond/pull/206
更新：
お読みください： http://getbootstrap.com/getting-started/#support
さらに、Internet Explorer 8では、メディアクエリーのサポートを有効にするためにrespond.jsを使用する必要があります。
こちらもご覧ください： https://github.com/scottjehl/Respond
このため、基本テンプレートのheadセクションには次の行が含まれています。
<!-- 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に移行するときにも同じ問題が発生しました。respons.jsとhtml5shiv.jsをすでに持っていて、メタをEdgeに設定していました。 2から3にnavbar要素タイプが変わったことを逃しました。ブートストラップ2では、それはnavでした。 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が問題の原因でした。ブートストラップ3.0.2をIE 8で応答可能にするには（F12開発者ツールを使用してエミュレート）、
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のリンクであり、このコードをローカルホストで実行します。
念のため。 cssファイルをロードした後で、IE固有のjsファイルを必ずロードしてください。
<head>はそれらだけを取るので、respond.jsにあなたのCSSリンクを置くことを忘れないでください。
前述のように、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="//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、respond.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 Cascading Style Sheetsレベル3仕様（Working Draft）およびその他の新しい規格に対する限定的なサポートも提供します。
エッジモードは、利用可能な最も高いモードでコンテンツを表示するようにInternet Explorerに指示します。 Internet Explorer 9では、これはIE 9モードと同等です。 Internet Explorerの将来のリリースでより高い互換モードがサポートされている場合、Edgeモードに設定されたページはそのバージョンでサポートされている最高のモードで表示されます。 Internet Explorer 9で表示した場合、これらの同じページは依然としてIE 9モードで表示されます。
参照 <meta http-equiv = "X-UA互換" content = "IE = Edge">とは何ですか？
この問題を修正しました。実際にIE7と8は@mediaを適切にサポートしていません、そしてあなたが“ col-md- *”クラスのためにcssをチェックしそしてそこで幅がメディア幅992pxで与えられるならば。新しいcssファイルIEを作成してください（例：IE.css）。条件付きコメントを追加してください。そして、あなたのデザインに必要なクラスをそこにあるメディアのクエリと直接コピーするだけで完了です。
追加する必要があります - <meta http-equiv="X-UA-Compatible" content="IE=Edge">
私はBootstrap 3を使用していました - それは私のローカルのIEで動作していました。
IEで動かなかったのでライブにしました。
ただBootstrapが彼らのテンプレートにそのコードの行を含まない、私はなぜかわからないが、それはそれがW3C互換性がないことが原因であるかもしれません。
私は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タグはこんな感じです：
<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サーバーを作成してコンテンツを設定して試してください。
Bootstrap 3にはrespond.jsが必要です。それをjsに入れてヘッダーのhtmlに追加するだけではローカルマシンでは動作しません。アクセスが拒否されたと表示されます。 IEにはセキュリティ上の制限があるため、サーバーを通じてのみ機能します。 ：P
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]-->
私はここですべてのコメントを読み、すべてを試してみました..しかしそれをドキュメントモードでWindows 7 - Internet Explorer 11（）で動くようにすることができませんでした：IE8 ）.
それからそれは、ドキュメントモード（IE8）を実行すると、実際のIE8と同じではないことに気づいたので、私はWindows Virtual PCWindows 7のInternet Explorerをインストール8）とtadaaaa ...それは魅力のように動作します！
これを機能させるために、このコードをJUSTをページの下部に配置しました。
<!-- 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がないことを確認してください。
私は同じ問題に直面し、最初の答えを試みたが何かが足りなかった。
皆さんが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")
}
]
}
}
お役に立てば幸いです
この解決策を使う
<!--[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" />はブートストラップフォントを有効にします。
ブートストラップ3.3.5でテスト済み
ダウンロード mediaqieries.js へのリンク。ダウンロードするリンク bootstrap-ie7.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
Bootstrapv2からv3に移行するときにも、まったく同じ問題がありました。
（私のように）古いspanXをcol-sm-Xに置き換えて移行した場合は、col-Xクラスも追加する必要があります。 col-Xは、@ mediaブロックの外側にあるスタイルなので、メディアクエリのサポートなしで機能します。
コンテナの幅を固定するには、@ mediaブロックの外側で自分で設定します。何かのようなもの：
.container {
max-width: @container-tablet;
}
@import "Twitter-bootstrap/less/bootstrap";
必ずブートストラップソースを別々にリンクしてください
LESSまたはSASSを使用する場合は、スタイルのコンパイルに貪欲にならないでください。私のプロジェクトでは、メインスタイルのbootstrap.min.cssをファイルの一番上に含めました - そのため、すべてのスタイルに対して1つの要求しかありません。
そしてそのため、boostrapクラスは正しく機能しませんでした。別に追加した場合は、期待どおりに動作します。