bootstrap3はIE8ブラウザに対応しました！ _JavaScript スキル-jsチュートリアル-php.cn

bootstrap3はIE8ブラウザに対応しました！ _JavaScript スキル

WBOY

リリース： 2016-05-16 15:02:41

オリジナル

1912 人が閲覧しました

私は最近、優れたフロントエンドフレームワークであるブートストラップを使用しています。このフレームワークには、ドロップダウンメニュー、ボタングループ、ボタンドロップダウンメニュー、ナビゲーション、ナビゲーションバー、ページング、レイアウトが含まれています。、サムネイル、警告ダイアログボックス、プログレスバー、メディアオブジェクトなどのブートストラップは、Web ページを作成するときに、

内の CSS を直接呼び出すだけで済みます。

Bootstrap はレスポンシブレイアウトであり、ワイドスクリーンコンピューター、通常のコンピューター、タブレット、携帯電話で非常に優れたレイアウトエクスペリエンスを得ることができます。この応答性の高いレイアウトは、CSS3 のメディアクエリ機能によって実現され、さまざまな解像度に応じてさまざまなスタイルに一致します。 IE8 ブラウザは、この優れた CSS3 機能をサポートしていません。Bootstrap は、IE6 および IE7 と互換性を持たせるための使用方法を開発ドキュメントに記載しています。BSIE (bootstrap2)

を検索してください。

IE8 のブートストラップは Chrome、Firefox、IE11 ほど完璧ではありません。一部のコンポーネントは完全な互換性が保証されていないため、ハッキングする必要があります。

1. HTML5 宣言を使用します

<!DOCTYPE html>
这里不可以有空格
<html>

ログイン後にコピー

注:

2. メタタグを追加します

このページの IE バージョンの表示を確認します

<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />

ログイン後にコピー

注: ブートストラップは IE 互換モードをサポートしていません。IE ブラウザが最新のレンダリングモードを実行できるようにするために、IE=edge タグが IE の最新カーネルである chrome の使用を強制することを意味します。 =1 は、IE6 がインストールされている /7/8 および他のバージョンのブラウザプラグイン Google Chrome Frame

を意味します

3. ブートストラップファイルをインポートします

コードをコピーコードは次のとおりです:

4. html5shiv.min.js と Reply.min.js を導入します

html5 を（完全に）サポートしていないブラウザでも html5 タグを「サポート」できるようにします

<!--[if lt IE 9]>
<script src="js/bootstrap/html5shiv.min.js"></script>
<script src="js/bootstrap/respond.min.js"></script>
<![endif]-->

ログイン後にコピー

5. バージョン 1.X Jquery ライブラリを追加します

コードをコピーコードは次のとおりです:

6. IE8 でテストしたところ、プレースホルダーがサポートされていない問題が見つかりました。この記事で引用した jquery は 1.12.0 で、これを解決する方法です。最初の引用 jquery

<script type="text/javascript" src="js/bootstrap/jquery-1.12.0.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

ログイン後にコピー

他の jquery バージョンを使用してから

を導入することもできます

[コード]
次に、ファイル

にコードを追加します。

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

ログイン後にコピー

コードは次のように要約されます:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
 <meta name="author" content="zhy" />
 <title>ie8</title>
 <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
 <!--[if lte IE 9]>
 <script src=js/bootstrap/respond.min.js"></script>
 <script src=js/bootstrap/html5shiv.min.js"></script>
 <![endif]-->
 <script src="js/bootstrap/jquery-1.12.0.min.js"></script>
 <script src="js/bootstrap/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>

ログイン後にコピー

注:

1. IE での IE バージョンを決定するステートメント

<!--[if lte IE 6]>
<![endif]-->
IE6及其以下版本可见
 
<!--[if lte IE 7]>
<![endif]-->
IE7及其以下版本可见
 
<!--[if IE 6]>
<![endif]-->
只有IE6版本可见
 
<![if !IE]>
<![endif]>
除了IE以外的版本
 
<!--[if lt IE 8]>
<![endif]-->
IE8以下的版本可见
 
<!--[if gte IE 7]>
<![endif]-->

ログイン後にコピー

IE7 以降のバージョンが表示されます
lte：Less than or equal toの略で、以下という意味です。
lt: Less thanの略で、未満という意味です。
gte：Greater than orequal toの略で、以上という意味です。
gt：Greater thanの略で、「より大きい」という意味です。
!: 等しくないという意味で、JavaScript の不等号判定記号と同じです

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。