ブートストラップが IE をサポートしていない問題の解決策: まず、HTML ページの先頭に DOCTYPE ステートメントがあることを確認し、次にリモート アドレスを正しく呼び出し、ブラウザのコンテンツをマークし、最後に確認します。対応する js または css ファイルを変更するだけです。
#この記事の動作環境: Windows7 システム、bootstrap3、Dell G3 コンピューター。
bootstrap には、IE9 より前のブラウザとの互換性の問題があります。この互換性の問題を解決するには、関連する js ファイルを導入し、それに応じて処理する必要があります。ブートストラップがIEに対応していない問題の解決方法を以下の記事で紹介しますので、ご参考になれば幸いです。
まず、HTML ページの先頭に DOCTYPE ステートメントがあることを確認する必要があります。 DOCTYPE は、HTML ドキュメントの解析に使用する HTML または XHTML 仕様の種類をブラウザに伝えます。特に次のことに影響します:
属性とプロパティをマークするための制約ルール
ブラウザのレンダリング モードに影響を与えるレンダリング モードが異なると、ブラウザによる CSS コードの解析や JavaScript スクリプトにも影響します。
DOCTYPE は非常に重要です。現在のベスト プラクティスは、HTML ドキュメントの最初の行に
## を入力することです。 # マスターの投稿には、ブートストラップ検索の理由がいくつかまとめられていますが、まず、Bootstrap3 はモバイルデバイスファーストの原則で開発されているため、理由は次のとおりです:
1. リモート アドレスが正しく呼び出されない
つまり、IE9 より前の場合は、2 つの特別な js
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
ログイン後にコピー
を呼び出すだけです。しかし、テストしたところ、上記の js ファイルだけを使用するのは不可能であることがわかりました。
推奨: "
bootstrap チュートリアル"
2. 呼び出しメソッドが間違っています
respond.min.js を参照するために file:// または @import フォームを使用しないでくださいまたは、response.js または css ファイル
3. ブラウザの場合、コンテンツをマークします (メタ タグを使用してブラウザのレンダリング モードを調整します)
bootstrap は IE 互換モードをサポートしていません。ブラウザで最新のレンダリング モードを実行するには、次のタグがページに追加されます。
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
ログイン後にコピー
IE=edge は最新の IE カーネルの使用を強制することを意味し、chrome=1 はブラウザ プラグイン Google IE6/7/8 およびその他のバージョンの Chrome Frame がインストールされている場合 (ユーザーのブラウザは IE のメニューとインターフェイスのように見えますが、ユーザーが Web ページを閲覧するときは、実際には Chrome ブラウザ カーネルを使用します)、Chrome カーネルは次のようになります。レンダリングに使用されます。このメタ タグの詳細な説明については、StackOverflow の素晴らしい回答を参照してください。英語での
タグの専門的な説明については、
http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e
ログイン後にコピー
を参照してください。文
を追加しました。
<meta http-equiv="X-UA-Compatible" content="IE=9" />
ログイン後にコピー
そして、
カーネル コントロール メタ タグを実行できます。現在の国内の主流ブラウザはデュアルコアであるため、ページのレンダリングにどのコアを使用するかをブラウザに指示するためにメタ タグが追加されます
4. IE8 はコンテナーをサポートしません いくつかの属性
IE8 はボックス サイズ変更を完全にはサポートしません: border-box は min-width、max-width、min-height、または max-height で使用されます。したがって、ブートストラップ v3.0.1 では、コンテナ クラスは max-width を使用しなくなりました。
5. JS と CSS の導入順序に起因する問題
最初に css を引用し、次に js を引用する必要があります
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" media="screen"/>
<script type="text/javascript" src="js/respond.min.js"></script>
ログイン後にコピー
6. 前後に空行がありますDOCTYPE
<!DOCTYPE html>
这里有空格也不行，要去掉空格
ログイン後にコピー
7. bootstrap.css
bootstrap2.1.1 を使用している場合は、手動で変更することもできます。navbar-inner{ filter:none} を変更すると問題を解決できます。バージョン 3.0 では、この段落はありません。コード、詳細な紹介についてはリンクを参照してください
http://stackoverflow.com/questions/12460190/bootstrap-navbar-does-not-show-in-ie8
ログイン後にコピー
8. quirks モード (互換モード) の使用
Web ページを定義するとき、後方互換モード古いブラウザとの互換性はquirksモードに相当し、「標準モード」は標準モードです。具体的には、先ほどと同じように <!DOCTYPE html> と書きます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
ログイン後にコピー
テストしてみましたが、現実的ではありません。
最終的には IE11 でテストに合格しましたが、テストしてみるとIE8 で何かを見つけました。問題はプレースホルダーがサポートされていないことです。
IE がプレースホルダーをサポートしている問題を解決する方法は次のとおりです。
この記事で引用している jquery は 1.11.1 です。 jquery
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
ログイン後にコピー
他の jquery バージョン
紹介
<script type="text/javascript" src="js/jquery.placeholder.js"></script>
ログイン後にコピー
jquery.placeholder.js ファイルのダウンロード アドレス https:/ を引用することでも使用できます。 /github.com/mathiasbynens/jquery-placeholder
そしてファイルにコードを追加します
<script type="text/javascript">
$(function () {
// Invoke the plugin
$('input, textarea').placeholder();
});
</script>ログイン後にコピー
私がここに関与している場合、または問題がまだ解決されていない場合は、http:// にアクセスしてください。詳細については、hustlzp.com/post/2014/01/ie8-compatibility をご覧ください
以上がブートストラップが IE をサポートしていない場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
