Bootstrap_javascript スキルをサポートするすべての IE シリーズのソリューション-jsチュートリアル-php.cn

Bootstrap_javascript スキルをサポートするすべての IE シリーズのソリューション

WBOY

リリース： 2016-05-16 15:36:08

オリジナル

1124 人が閲覧しました

最近 Web サイトを作成したのですが、Bootstrap がとても良いと思っていました。今回は、Chrome、Firefox、safari、Opera、360 ブラウザー (スピードモード)、その他のブラウザーでは問題ありませんでした。しかし、IE8 と IE11 ではスタイルを表示できないことがわかり、Baidu をいろいろ検索し、最終的にネチズンの投稿の助けを借りて問題を解決しました。解決策は次のようにまとめられています。

まず、HTML ページの先頭に DOCTYPE 宣言があることを確認する必要があります。 DOCTYPE は、HTML ドキュメントの解析にどの HTML または XHTML 仕様を使用するかをブラウザーに指示します。特に以下に影響します。

属性とプロパティをマークするための制約ルール
ブラウザのレンダリングモードに影響します。レンダリングモードが異なると、ブラウザの CSS コードや JavaScript スクリプトの解析にも影響します
。 DOCTYPE は非常に重要です。現在のベストプラクティスは、HTML ドキュメントの最初の行に
を入力することです。

<!DOCTYPE html>

ログイン後にコピー

マスターの投稿では、Bootstrap を探す理由をいくつかまとめました。まず、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 ファイルを使用するだけでは実現できないことがわかりました。

2. 呼び出しメソッドが間違っています

respond.min.js、respond.js、または CSS ファイルを参照するために file:// または @import フォームを使用しないでください

3. ブラウザのコンテンツをマークします (メタタグを使用してブラウザのレンダリング方法を調整します)

ブートストラップは IE 互換モードをサポートしていません。IE ブラウザが最新のレンダリングモードを実行できるようにするために、次のタグがページに追加されます。

IE=edge は、IE の最新カーネルが強制的に使用されることを意味します。 chrome=1 は、IE6/7/8 およびその他のバージョン用のブラウザプラグイン Google Chrome Frame がインストールされている場合に、ユーザーのブラウザにまだインストールされている可能性があることを意味します。 IE のメニューとインターフェイスは異なりますが、ユーザーが Web を閲覧する場合、実際には Chrome ブラウザカーネルが使用され、レンダリングには Chrome カーネルが使用されます。このメタタグの詳細な説明については、StackOverflow の優れた回答を参照してください。英語のタグの専門的な説明については、
を参照してください。 http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatibility-content-ie-edge-e
一文を追加しました

それでは以上です
カーネルは Meta タグを制御します。現在の国内の主流ブラウザはデュアルコアであるため、ページのレンダリングにどのカーネルを使用するかをブラウザに指示するためにメタタグが追加されます。

4.IE8 はコンテナのいくつかのプロパティをサポートしていません

IE8 は、box-sizing: border-box with min-width、max-width、min-height、または max-height の使用を完全にはサポートしていません。そのため、ブートストラップ v3.0.1 のコンテナクラスは、Use max ではなくなりました。 -幅。

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 の前後に空白行があります。

ここにスペースがあると機能しません。スペースを削除する必要があります

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 モードであり、対応する「標準モード」は標準モードです。具体的には、以前と同様に

と記述します。 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 バージョンも使用できます

次に、
を導入します。 jquery.placeholder.js ファイルのダウンロードアドレス
https://github.com/mathiasbynens/jquery-placeholder 次に、コードをファイル
に追加します。

<script type="text/javascript">
  $(function () {
    // Invoke the plugin
    $('input, textarea').placeholder();
  });
</script>

ログイン後にコピー

上記の IE6、7、8、9、10、11、Chrome、Firefox、safari、Opera、360 ブラウザ (スピードモード)、Sogou ブラウザのテストに合格しましたが、IE5.5 のみが実行可能ではないようです、要するに問題は解決されましたこの時点で、邪悪な IE6 - 醤油と呼んでください