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

ホームページ

ウェブフロントエンド

ブートストラップのチュートリアル

ブートストラップが 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 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 までご連絡ください。

ブートストラップ：WebフレームワークのクイックガイドApr 15, 2025 am 12:10 AM

Bootstrapは、Twitterが開発したフレームワークであり、レスポンシブでモバイルファーストのWebサイトとアプリケーションを迅速に構築できます。 1.使いやすさとリッチなコンポーネントライブラリにより、開発が速くなります。 2。巨大なコミュニティは、サポートとソリューションを提供します。 3.レスポンシブグリッドの作成など、CDNを介してスタイルを制御するためにクラス名を紹介および使用します。 4。カスタマイズ可能なスタイルと拡張コンポーネント。 5.利点には、迅速な開発とレスポンシブデザインが含まれますが、欠点はスタイルの一貫性と学習曲線です。

ブートストラップの分解：それが何であり、なぜそれが重要なのかApr 14, 2025 am 12:05 AM

bootstrapisafree、open-sourcessframeworkthatsthatssponsiveandmobile-firstwebitedevelopment。

ブートストラップ：Webデザインを簡単にしますApr 13, 2025 am 12:10 AM

Webデザインがブートストラップを簡単にするものは何ですか？そのプリセットコンポーネント、レスポンシブデザイン、豊富なコミュニティサポート。 1）プリセットコンポーネントライブラリとスタイルにより、開発者は複雑なCSSコードの作成を避けることができます。 2）ビルトイングリッドシステムは、レスポンシブレイアウトの作成を簡素化します。 3）コミュニティサポートは、豊富なリソースとソリューションを提供します。

Bootstrapの影響：Web開発の加速Apr 12, 2025 am 12:05 AM

BootstrapはWeb開発を加速し、事前に定義されたスタイルとコンポーネントを提供することにより、開発者は迅速にレスポンシブWebサイトを構築できます。 1）プロジェクトの数日以内に基本的なレイアウトを完了するなど、開発時間を短縮します。 2）SASS変数とミキシンを通じて、ブートストラップにより、カスタムスタイルが特定のニーズを満たすことができます。 3）CDNバージョンを使用すると、パフォーマンスを最適化し、負荷速度を向上させることができます。

ブートストラップの理解：コアの概念と機能Apr 11, 2025 am 12:01 AM

Bootstrapはオープンソースのフロントエンドフレームワークであり、その主な機能は、開発者がレスポンシブWebサイトを迅速に構築できるようにすることです。 1）複雑なUI効果の実装を容易にするために、事前定義されたCSSクラスとJavaScriptプラグインを提供します。 2）ブートストラップの作業原則は、メディアクエリを通じてレスポンシブデザインを実現するために、そのCSSおよびJavaScriptコンポーネントに依存しています。 3）使用の例には、ボタンの作成などの基本的な使用法や、カスタムスタイルなどの高度な使用法が含まれます。 4）一般的なエラーには、クラス名のスペルミスやファイルの導入が誤っています。ブラウザ開発者ツールを使用してデバッグすることをお勧めします。 5）パフォーマンスの最適化は、カスタムビルドツールを通じて実現できます。

ブートストラップディープダイブ：レスポンシブデザインと高度なレイアウト技術Apr 10, 2025 am 09:35 AM

ブートストラップは、グリッドシステムとメディアクエリを介してレスポンシブデザインを実装し、さまざまなデバイスにウェブサイトを適合させます。 1.事前定義されたクラス（COL-SM-6など）を使用して、列の幅を定義します。 2。グリッドシステムは12列に基づいており、合計が12。3を超えないことに注意する必要があります。ブレークポイント（SM、MD、LGなど）を使用して、異なる画面サイズの下のレイアウトを定義します。

ブートストラップインタビューの質問：夢のフロントエンドの仕事を着陸させますApr 09, 2025 am 12:14 AM

Bootstrapは、レスポンシブWebサイトとアプリケーションを迅速に開発するためのオープンソースのフロントエンドフレームワークです。 1.レスポンシブ設計、一貫したUIコンポーネント、迅速な発展の利点を提供します。 2。グリッドシステムは、12列構造に基づいてフレックスボックスレイアウトを使用し、.container、.row、.col-sm-6などのクラスを通じて実装されています。 3.カスタムスタイルは、SASS変数を変更するか、CSSを上書きすることで実装できます。 4.一般的に使用されるJavaScriptコンポーネントには、モーダルボックス、カルーセル図、折りたたみが含まれます。 5.最適化パフォーマンスは、必要なコンポーネントのみをロードし、CDNを使用し、マージファイルを圧縮することで実現できます。

Bootstrap＆JavaScriptの統合：動的な機能と機能Apr 08, 2025 am 12:10 AM

BootstrapとJavaScriptをシームレスに統合して、Webページに動的な機能を与えることができます。 1）JavaScriptを使用して、モーダルボックスやナビゲーションバーなどのブートストラップコンポーネントを操作します。 2）jQueryが正しくロードされていることを確認し、一般的な統合の問題を回避します。 3）イベント監視とDOM操作を通じて、複雑なユーザーの相互作用と動的効果を実現します。

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

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

ホットツール

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コードプロンプト機能はサポートされていません

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

ドリームウィーバー CS6

ビジュアル Web 開発ツール

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、