ホームページ ウェブフロントエンド ブートストラップのチュートリアル ブートストラップが IE をサポートしていない場合はどうすればよいですか?

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

Feb 05, 2021 am 09:12 AM
bootstrap

ブートストラップが 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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

ブートストラップ検索バーを取得する方法 ブートストラップ検索バーを取得する方法 Apr 07, 2025 pm 03:33 PM

ブートストラップを使用して検索バーの値を取得する方法:検索バーのIDまたは名前を決定します。 JavaScriptを使用してDOM要素を取得します。要素の値を取得します。必要なアクションを実行します。

ブートストラップの垂直センタリングを行う方法 ブートストラップの垂直センタリングを行う方法 Apr 07, 2025 pm 03:21 PM

ブートストラップを使用して垂直センタリングを実装します。FlexBoxメソッド:D-Flex、Justify-Content-Center、Align-Items-Centerクラスを使用して、FlexBoxコンテナに要素を配置します。 ALIGN-ITEMS-CENTERクラス方法:FlexBoxをサポートしていないブラウザの場合、親要素の高さが定義されている場合、Align-Items-Centerクラスを使用します。

VueでBootstrapの使用方法 VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション:カスタムスタイル。オプション:プラグインを使用します。

ブートストラップにスプリットラインを書く方法 ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

ブートストラップのサイズを変更する方法 ブートストラップのサイズを変更する方法 Apr 07, 2025 pm 03:18 PM

Bootstrapの要素のサイズを調整するには、次のものを含むDimensionクラスを使用できます。

ブートストラップに写真を挿入する方法 ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ブートストラップのフレームワークをセットアップする方法 ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします(オプション)。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

ブートストラップの日付を表示する方法 ブートストラップの日付を表示する方法 Apr 07, 2025 pm 03:03 PM

回答:ブートストラップの日付ピッカーコンポーネントを使用して、ページで日付を表示できます。手順:ブートストラップフレームワークを紹介します。 HTMLで日付セレクター入力ボックスを作成します。ブートストラップは、セレクターにスタイルを自動的に追加します。 JavaScriptを使用して、選択した日付を取得します。

See all articles