IE9 のネイティブ ページ互換性の問題に対する解決策についての簡単な説明

序文

最近、クライアントのネイティブページを引き継ぎました。顧客は、ページが IE9 以降のバージョンのブラウザと互換性があり、360 ブラウザの互換モードに正常にアクセスできることを要求します。 360 ブラウザはコードを通じて高速モードを強制することができ、この問題は比較的簡単に解決できます。ただし、IE9 との互換性を保つために、多くの CSS3 プロパティと H5 の新しい API は使用できません。この記事では、このプロジェクトで発生した IE9 の互換性の問題のいくつかを体系的にまとめます。

1. 360 ブラウザを強制的に高速モードにする

ご存知のとおり、360 Browser には「Extreme Speed Mode」と「Compatibility Mode」という 2 つのアクセス モードがあります。エクストリーム スピード モードでは、Google が開発し、Chrome ブラウザで使用されている Apple の Webkit カーネルのブランチである Blink カーネルが使用されます。互換モードでは、IE ブラウザで使用されるカーネルである Trident カーネルが使用されます。

互換モードでどのバージョンの IE が対応しているかについては、360 ブラウザの互換モードでページの空白領域を右クリックし、ポップアップ メニューで「互換モードの切り替え」を選択し、具体的な IE バージョンを確認できます。

Blink カーネルと Trident カーネルはページ コンテンツのレンダリングに大きな違いがあるため、最新のフロントエンド テクノロジを使用して作成された Web ページは互換モードでは正常に表示されない可能性があります。この問題を解決するには、次のコードを使用して、ページを強制的に 360 ブラウザの高速モードで動作およびレンダリングすることができます。

<meta name="レンダラー" content="webkit" />

2. IE9のCSS3サポート

1. ボックスモデルレイアウト

ページレイアウトの観点から見ると、IE9 の Trident カーネルのボックスモデルの計算方法は Blink カーネルのものと異なり、主にボックス要素の padding 属性に反映されます。

たとえば、div ブロックレベル要素は、レンダリング時に幅が 400 ピクセル、高さが 600 ピクセルになり、その周囲に 20 ピクセルのパディングが付きます。

<div class="box"></div>

（1）Blinkカーネルでは、divブロックレベル要素にパディングを追加すると、ブロックレベル要素全体が拡張されます。要素のレンダリング サイズを維持するには、レンダリング サイズから周囲のパディング サイズを減算する必要があります。コードを以下に示します。

。箱{
   width:360px; // レンダリング幅 - 左パディングサイズ - 右パディングサイズ = 400px - 20px - 20px = 360px
   height:560px; // レンダリングの高さ - 上部のパディングサイズ - 下部のパディングサイズ = 600px - 20px - 20px = 560px
   パディング:20px;
}

（2）Tridentカーネルでは、divブロックレベル要素にパディングを追加しても、ブロックレベル要素全体が拡大されるわけではありません。したがって、周囲のパディングのサイズを減算する必要はありません。コードを以下に示します。

。箱{
   幅:400ピクセル;
   高さ:600px;
   パディング:20px;
}

上記の違いを考慮すると、コードを書く際に IE9 との互換性の問題をどのように解決すればよいでしょうか?

CSS3 には、ボックス モデルのレイアウト モードを設定するための box-sizing プロパティが用意されています。このプロパティは IE8 以降でサポートされています。 box-sizing プロパティが border-box に設定されている場合、このプロパティを使用して要素に padding プロパティを追加した後、エフェクト画像の幅と高さから対応する方向の padding サイズを減算する必要はありません。

次に、すべてのコンテナーの box-sizing プロパティを border-box に設定するだけで、ボックス モデルのレイアウト モードが統一され、IE9 ブラウザーと自然に互換性が保たれます。コードを以下に示します。

*{ボックスのサイズ:境界線ボックス;}

この CSS コードを使用すると、互換性を考慮せずにボックスモデルレイアウトを大胆に行うことができます。

2. IE9は柔軟なボックスレイアウトをサポート

確かに、IE9 は柔軟なボックス レイアウトをサポートしていません。最も簡単な方法は、Flexbox レイアウトを使用しないことです。

ここでは、IE9 で Flex のフレキシブル ボックス レイアウトを使用できるようにする Flex-Native という js ライブラリを紹介します。

（1）ページにFlex-Nativeライブラリを読み込みます。

<script src="https://unpkg.com/flex-native@latest"></script>

（2）Flexboxレイアウトを使用するコンテナーでFlex機能を有効にします。

。箱{
   display:flex; //Blinkカーネルと互換性あり -js-display:flex; //Flex-Nativeの影響下でTridentカーネルと互換性あり}

（３）その他のFlexプロパティは通常通り使用できます。

3. IE9は以下のCSS3プロパティをサポートしていません

（１）テキストシャドウ
（２）変換する
（３）移行
（4）列
（５）アウトラインオフセット
（6）サイズ変更
(7) 画像の境界
(8) CSS3 グラデーションカラー

4. IE9は以下のCSSセレクタをサポートしていません

(1) ::前
（２） ::その後
(3) ::最初の文字
(4) ::最初の行

3. IE9 の jQuery サポート

インターネット上では「IE9 はバージョン 2.0 未満の jQuery のみをサポートする」というコメントが多く見られます。プロジェクト完了後、jQuery のバージョンを 3.5.1 にアップグレードしたところ、動作しました。カルーセルやスライディングドアで使用される jQuery セレクターとメソッドの少なくとも一部は利用可能です。

IE9 が jQuery 2.0 以上をサポートしていないセレクターまたはメソッドをテストした場合は、それらを追加してください。

4. IE9はプレースホルダー属性をサポートしていません

HTML5 では、フォーム要素のテキスト プレースホルダーの記述を容易にするために、プレースホルダー属性が設定されています。しかし、IE9 はこのプロパティをサポートしていません。このソリューションは、jQuery または JavaScript ネイティブ スクリプトを記述することで実現できます。

1. 通常のテキストボックスの解決策

実装原則: プレースホルダーを実装するには、テキスト ボックスの value 属性を使用します。

（１）テキストボックスにマウスフォーカスが当たったとき、テキストボックスの内容がプレースホルダ属性で設定されたテキストである場合、テキストボックスの内容は消えます。
（２）テキストボックスからマウスフォーカスが離されたとき、テキストボックスの内容が空であれば、テキストボックスはプレースホルダ属性で設定されたテキストに復元されます。

私はネイティブ JavaScript を使用しましたが、サポートされている場合は jQuery を使用することもできます。

//クラス名に基づいてDOMノードを検索する関数をカプセル化します function $$(className){
    document.getElementsByClassName(className) を返します。
}
// テキストボックスのプレースホルダープロパティはIE9と互換性があります
if("msDoNotTrack"in window.navigator){ //ブラウザがIE9かどうかを判断します
    for(var i=0;i<$$("入力").length;i++){
        var text=$$("入力")[i].getAttribute("プレースホルダー");
        $$("入力")[i].value=テキスト;
        $$("入力")[i].addEventListener("フォーカス",関数(){
            if(this.value==this.getAttribute("プレースホルダー")){
                this.value="";
            }
        })
        $$("入力")[i].addEventListener("ぼかし",function(){
            var テキスト = this.getAttribute("プレースホルダー");
            if(this.value==""){
                this.value=テキスト;
            }
        })
    }
}

2. パスワードドメインのソリューション

問題: パスワード フィールドの場合、値属性の値によって、実際のテキスト コンテンツではなく、小さなドットのパスワード マスクがパスワード フィールドに表示されるため、値属性を使用してスクリプトを通じてプレースホルダー機能をシミュレートすることはできません。

解決策: パスワード フィールドの type 属性の値を常に変更することで、パスワード フィールドのデフォルトの type 値がテキストに設定され、value 属性の値を表示できるようになります。

（1）パスワードフィールドにマウスフォーカスが当たったときに、そのtype属性をpasswordに変更して、ユーザーが入力したパスワードが見えないようにする。
（2）パスワードフィールドからマウスのフォーカスが外れたら、type属性をtextに変更してプレースホルダーテキストが表示されるようにします。

関数 $$(クラス名){
    document.getElementsByClassName(className) を返します。
}
// テキストボックスのプレースホルダープロパティはIE9と互換性があります
if("msDoNotTrack" in window.navigator){    
    $$("パスワード")[0].type="text";
    $$("パスワード")[0].addEventListener("フォーカス",function(){
        this.type="パスワード";
    })
    for(var i=0;i<$$("パスワード").length;i++){
        var text=$$("パスワード")[i].getAttribute("プレースホルダー");
        $$("パスワード")[i].value=テキスト;
        $$("パスワード")[i].addEventListener("フォーカス",function(){
            if(this.value==this.getAttribute("プレースホルダー")){
                this.value="";
            }
        })
        $$("パスワード")[i].addEventListener("ぼかし",function(){
            var テキスト = this.getAttribute("プレースホルダー");
            if(this.value==""){
                this.value=テキスト;
                this.type="テキスト"
            }
        })
    }
}

要約する

IE9 の互換性の問題に関するこの概要には、何らかの欠点があるはずです。以下の記事では、IE9 の互換性で発生したその他の多くの問題をまとめています。このようなプロジェクトに遭遇した場合は、これらを参照してください。

これで、IE9 のネイティブ ページ互換性問題の解決に関するこの記事は終了です。IE9 のネイティブ ページ互換性の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。