ブートストラップが IE をサポートしていない場合はどうすればよいですか?-ブートストラップのチュートリアル-php.cn

ブートストラップが IE をサポートしていない場合はどうすればよいですか?

藏色散人

リリース： 2023-01-13 00:22:22

オリジナル

2761 人が閲覧しました

ブートストラップが IE をサポートしていない問題の解決策: まず、HTML ページの先頭に DOCTYPE ステートメントがあることを確認し、次にリモートアドレスを正しく呼び出し、ブラウザのコンテンツをマークし、最後に確認します。対応する js または css ファイルを変更するだけです。

ブートストラップが IE をサポートしていない場合はどうすればよいですか?

#この記事の動作環境: Windows7 システム、bootstrap3、Dell G3 コンピューター。

bootstrap には、IE9 より前のブラウザとの互換性の問題があります。この互換性の問題を解決するには、関連する js ファイルを導入し、それに応じて処理する必要があります。ブートストラップがIEに対応していない問題の解決方法を以下の記事で紹介しますので、ご参考になれば幸いです。

まず、HTML ページの先頭に DOCTYPE ステートメントがあることを確認する必要があります。 DOCTYPE は、HTML ドキュメントの解析に使用する HTML または XHTML 仕様の種類をブラウザに伝えます。特に次のことに影響します:

属性とプロパティをマークするための制約ルール

ブラウザのレンダリングモードに影響を与えるレンダリングモードが異なると、ブラウザによる CSS コードの解析や JavaScript スクリプトにも影響します。

DOCTYPE は非常に重要です。現在のベストプラクティスは、HTML ドキュメントの最初の行に

<!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
        $(&#39;input, textarea&#39;).placeholder();
    });
</script>

ログイン後にコピー

私がここに関与している場合、または問題がまだ解決されていない場合は、http:// にアクセスしてください。詳細については、hustlzp.com/post/2014/01/ie8-compatibility をご覧ください

以上がブートストラップが IE をサポートしていない場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。