[ブラウザ互換性チュートリアル]IE9でのネイティブページの互換性問題の解決方法について

前置き

最近、クライアントのネイティブページを預かった。クライアントは、そのページがIE9以上に対応していること、また、360ブラウザの互換モードが正常にアクセスできることを要求していました。360ブラウザはコードで強制的にエクストリームモードにすることができるので、この問題は比較的簡単に解決することができます。しかし、IE9に対応するためには、多くのCSS3プロパティやH5の新しいAPIが利用できません。この記事では、このプロジェクトで発生するIE9互換性の問題のいくつかを体系的にまとめています。

I. 360ブラウザで強制的にエクストリームモードでアクセスする

ご存知の通り、360Browserには「エクストリームモード」と「互換モード」の2つのアクセスモードがあります。Extremeモードは、AppleのWebkitカーネルをGoogleが開発し、Chromeで使用されているBlinkカーネルを使用します。互換モードは、Internet Explorerで使用されているカーネルであるTridentカーネルを使用します。

互換モードで対応するIEのバージョンについては、360ブラウザの互換モードで空白のページを右クリックし、ポップアップメニューから "互換モードの切り替え"を選択し、特定のIEバージョンを確認することで確認することができます。

BlinkカーネルとTridentカーネルではページ内容のレンダリングに大きな違いがあるため、最新のフロントエンド技術で作成したウェブページが互換モードでは正しく表示されない可能性があります。この問題を解決するには、以下のコードを使用することで、360ブラウザのExtremeモードでページを強制的に動作させ、レンダリングすることができます。

<meta name="renderer" content="webkit" />

II. IE9のCSS3への対応

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

ページレイアウトの観点から、IE9 の Trident カーネルのボックスモデル計算は Blink カーネルのそれとは異なり、主にボックス要素の padding プロパティに反映されます。

例えば、効果画像のdivブロックレベル要素は、幅400px、高さ600pxで、その周りに20pxのパディングサイズが設定されています。

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

(1) Blinkカーネルでは、divのブロックレベル要素にパディングを追加すると、ブロックレベル要素全体が支えとなります。要素の効果サイズを維持するためには、効果サイズから周囲のパディングサイズを差し引く必要があります。そのコードを以下に示します。

.box{
   width:360px; // render width-left padding size-right padding size-400px-20px-20px=360px
   height:560px; // render height - top padding size - bottom padding size = 600px-20px-20px=560px
   padding:20px;
}

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

.box{
   width:400px;
   height:600px;
   padding:20px;
}

上記の違いを踏まえて、IE9に対応するコードを書く場合、どのように解決すればよいでしょうか？

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

あとは、すべてのコンテナに box-sizing プロパティを border-box に設定させれば、ボックスモデルのレイアウトモードが統一され、IE9 ブラウザにも当然対応します。そのコードを以下に示します。

*{box-sizing:border-box;}

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

2. エラスティックボックスレイアウトのIE9対応

間違いなく、IE9はフレキシブルボックスレイアウトに対応していません。一番簡単な方法は、フレックスボックスレイアウトを使用しないことです。

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

(1) Flex-Nativeライブラリをページ内に読み込みます。

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

(2) フレキシブルボックスレイアウトを使用したいコンテナでFlex機能を有効にする。

.box{
   display:flex; //compatible with Blink kernel
   -js-display:flex; //Trident-compatible in the role of Flex-Native
}

(3) その他のFlexプロパティは通常通り使用可能です。

3、IE9 は以下の CSS3 プロパティに対応していません。

(1) テキストシャドウ
(2) トランスフォーム
[...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...]