IE6、IE7、IE8、IE9、IE10、IE11をブートストラップをサポートするための回避策

クズども · 掲載地 2016/08/03 22:55:23

類似があれば光栄です。転載される場合はお知らせください
IE6、IE7、IE8、IE9、IE10、IE11をブートストラップをサポートするための回避策

最近ウェブサイトを作りましたが、私はいつもBootstrapが非常に良いと感じていました。今回はbootstrap3、Chrome、Firefox、Safari、Opera、360ブラウザ(スピードモード)、Sogouブラウザなども問題ありません。IE8やIE11ではスタイルが表示されないことがわかりました。その後、様々なBaiduを試しました。最終的にネットユーザーの Yapeng.com 投稿の助けを借りて問題を解決しました。また、千巡学習ネットワークも参照してください解は以下のようにまとめられます:

まず、HTMLページがDOCTYPE宣言で始まっていることを確認してください。 DOCTYPEはブラウザにHTML文書を解析するために使用するHTMLまたはXHTML仕様を指示し、以下の要素に影響します。
タグ、属性、プロパティに関する制約
ブラウザのレンダリングモードに影響を与え、異なるレンダリングモードはCSSコードやJavascrip{filter}tスクリプトの解析にも影響します
DOCTYPEは極めて重要であり、現在のベストプラクティスはHTMLドキュメントの最初の行に次のように入力することです。
<!DOCTYPE html>

ブートストラップを見つける理由はいくつかあります。神の投稿でまとめられています。まず第一に、Bootstrap3はモバイルデバイス優先の原則に基づいて開発されたため、その理由は以下の通りです。
1. リモートアドレスが正しく呼び出されていない
つまり、IE9以下であれば、2つの特別なjsを呼び出してください


しかし、上記の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のメニューやインターフェースに見えますが、実際にはウェブ閲覧時にChromeカーネルを使用している場合)、そのChromeカーネルがレンダリングに使われます。このメタタグの具体的な説明についてはStackOverflowの素晴らしい回答をご覧ください。タグ<meta>専門家の英語解説はこちらでご覧いただけます
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はボックスサイズを完全にはサポートしていません。ボーダーボックスは最小幅、最大幅、最小高さ、または最大高さで使われます。したがって、ブートストラップv3.0.1のコンテナクラスはもはや最大幅を使用しません。

CSS 5.JS導入される順序による問題
jsを参照する前にCSSの引用が必要です
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" media="screen"/>
<scrip{filter}t type="text/javascrip{filter}t" src="js/respond.min.js"></scrip{filter}t>

6. DOCTYPEには前後の空欄があります
<!DOCTYPE html>
ここにスペースを入れるのはダメです。スペースは自分で取り除かなければなりません
<html>

7. bootstrap.cssを手動で変更することも可能です
もしBootstrap 2.1.1を使っているなら、navbar-inner{ filter:none}を修正すれば問題が解決します。バージョン3.0+を使っている場合はコードが存在しません。詳細は接続を参照してください
http://stackoverflow.com/questions/12460190/bootstrap-navbar-does-not-show-in-ie8

8. 個性モードを使う
ウェブページを定義する際、古いブラウザと後方互換性のあるモードはクワークズモードと呼ばれ、対応する「標準モード」は標準モードです。具体的には、<!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を参照されます
<scrip{filter}t type="text/javascrip{filter}t" src="http://code.jquery.com/jquery-1.11.1.min.js"></scrip{filter}t>
他のjqueryバージョンも利用できます
次に <scrip{filter}t type="text/javascrip{filter}t" src="js/jquery.placeholder.js"></scrip{filter}t>
このファイルのダウンロードアドレスjquery.placeholder.js https://github.com/mathiasbynens/jquery-placeholder
その後、ファイルにコードを追加します
<scrip{filter}t type="text/javascrip{filter}t">
$(関数 () {
プラグインを呼び出してください
$('input, textarea').placeholder();
});
</scrip{filter}t>
もし私がここに関わっている場合や、問題がまだ解決していない場合は、詳細 http://hustlzp.com/post/2014/01/ie8-compatibility 移動してください

上記のIE6、7、8、9、10、11、Chrome、Firefox、Safari、Opera、360ブラウザ(スピードモード)、Sogouブラウザテストは合格しましたが、IE5.5だけは実現不可能に思えます。要するに、ここで問題は解決しました。すべての悪のIE6、つまり醤油と呼んでください

jquery.placeholder.jsを使いたくない場合は、ブラウザ上でプレースホルダーエミュレーションの実装をサポートできません
詳細な http://ju.outofmemory.cn/entry/1595 についてはこの記事を参照してください

クズども · 掲載地 2016/08/03 23:05:15

ログインが見えます。

[ブートストラップ] IE6、IE7、IE8、IE9、IE10、IE11をブートストラップをサポートするための回避策

関連記事

閲覧したセクション