IETesterで歴代 IExplorerのCSS3 PIE実現能力を検証
IETesterで歴代 IExplorerのCSS3 PIE実現能力を検証
　
IETesterはIE5.5〜10表示を同時に確認出来るブラウザ互換性チェックツール
（2011.05.09作成）
IExplorerのHTML5/CSS3への対応は遅れ IExplorer 9になっても、他のブラウザと比べ
　て表示出来ない項目が多い。　　　　しかも、未だ多くのユーザが存在にもかかわらず
　Windows XPは IExplorer 9の適応外となってしまった。
ホームページ制作者にとってこの由々しき事態は、IExplorer 9未満のユーザを念頭に置
　いて作成しなければならず悩ましい限りだ。
そこで、IE5.5〜IE10プレビュー 表示の確認が同時に可能な IETesterを利用して、
　「CSS3 PIE」及び「IE-CSS3」による HTML5/CSS3実現の互換性について64ビット
　 Windows 7環境下で検証してみた。
　
　
　IETesterの使用
　
　　 IETester v0.4.10は、IE5.5 から IE10プレビュー の6つのバージョンでの表示確認を同時に
　 　 出来るフリーのウェブブラウザで、旧 IEのウェブブラウザ互換性チェックツールとして有用だ。
　 　　IETester is a free WebBrowser that allows you to have the rendering and javascript engines
　　　 of IE10 preview, IE9, IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the
　　　 installed IE in the same process.
　 1)IETesterは、ここから入手。今回はv0.4.10を試用した。
　　 「New IE9」は v0.4.9で Integrated IE9 into IETester installed となりそのまま使用可能だが、
　　 「New IE10」はIE10 Platform Previewをインストール後、How To install IE10 under IETester
　　 の記載に従って、
　　　C:\Program Files(x86)\Internet Explorer Platform Preview\iepreview.exe.local
　　　のiepreview.exe.localフォルダを
　　　C:\Program Files(x86)\Core Services\IETester\ie10 へコピーして
　　　ietester.ie10.exe.localにリネームすると有効化する。
　
　
　
　 　なお、IExplorer 9未対応のWindows XP環境で IE9が使用出来るようになる訳ではない
　　　・・・ある記事には可能だと間違って記載されているが、IE9タブはクラッシュして起動しない。
　 2)ホームメニューの「すべて」ボタンをクリックして、チェックを入れURLを入力して「OK」すると、
　　 IE5.5 から IE10プレビュー の6つのバージョンで同時に表示させる事が可能だ。
　
　
　 3)IETester v0.4.10の使い勝手
　　 IE6の表示は、IEtesterとIExplorer 9の共存環境では下記の不具合がありチェッカーとならない (>_<、)
　　 ダミーページでは、表示サイズを変更すると文字・図の配列が追従せずにレイアウトが崩れてしまう。
　　 　・・・「更新」ボタンを押せば正規のレイアウトとなるのだが。
　
　　 「ズームスライダ」による拡大/縮小レベルの変更が上手く出来ない不具合がある。
　　 IE7,8,9ではマウスの右クリックを使用出来ない。「進む」ボタンが機能しない。読み込み表示に時間
　　　が掛かる等、通常のブラウザとして使用するには軽快なネットサーフィンを望めない。
　　 しばしばIE7, 8, 9はクラッシュする
　　　 ・・・Windows 7ではタブの復元は可能なのだが、筆者が検証したWindows XP環境ではしばしばOS
　　　　　　がハングアップしてしまう重大な不具合があった ヽ(;＞ω＜)/
　
　
　
　　 IETester終了時しばしばアプリケ
　　 ーションエラーが発生している
　　 ・・・Windows 7では実際にアプリ
　　 　　自体が作動を停止してしまう
　　 　　事は稀なのだが。
　　 等、不安定さがある。
　
　 4)「開発ツール」では、別途 DebugBar V5.4.1をインストールすれば「DebugBarの切り替え」と「ソース
　　 コードの表示」の利用が可能となっている。
　
　
　
　
　HTML5対応ブラウザのCSS3表示能力：ダミーの「CSS3 PIE」及び「IE-CSS3」でテスト
　
　 　TML5/CSS3サンプルページの作成方法は、「このページの作成方法と閲覧上の注意」を参照。
　　 IE6〜8対応試験用サンプルページの作成は、
　　　 「IExplorer 8でもCSS3機能をCSS3 PIEで実現」＋「文字陰影をIE-CSS3で実現」を行った。
　 　そしてダミーページでは、空白のCSS3 PIE（PIE.htc）とIE-CSS3（ie-css3.htc）を添付して配信
　　　した。従って、IExplorer 9未満のブラウザでは以下のCSS3機能を表示出来ない。
　　　 border-radius（ボックスの角丸）, box-shadow（ボックス陰影）, border-image（ボーダー枠に
　　　 画像）, text-shadow（文字陰影）, nav（ナビゲーション）ボタンの表示、background-image
　　　 （背景画像）の複数表示
　　 なお、<meta http-equiv="X-UA-Compatible" content="chrome=1">タグは記述していない為、
　　　 IExplorer＋Chrome Frameを使用にしても作動しません
　
　
　 各ブラウザのダミーページのCSS3表示能力は、以下の如くだった。
　
　 Chrome 10, Firefox 4.0とSafari 5：問題なく正規に表示される（下図は、Chrome 10）
　
　
　
　 Opera 11：ボックス,角丸表現,文字陰影とボーダー枠画像の表示は可能だが、navボタンの表示
　　 は不可（正規表示は上図）。
　
　
　
　 IExplorer 9（9.0.8112）：ボックスの表示、背景画像の複数表示は可能。navボタンの表示も
　　 可能だが、ボタンの角丸表示は不可。ナッ何んと！文字陰影を表示出来ない。しかも、ボー
　　 ダー枠に画像を表示する事も出来ない（正規表示は上図）！
　
　
　
　 IExplorer 10 Platform Preview1： IExplorer 9と同じで何ら改善されていない（正規表示は上図）。
　
　
　
　 ＜参考＞IExplorer 6〜8：空白の「CSS3 PIE」と「IE-CSS3」を添付したダミーなので、当然
　　 ボックス、文字陰影、背景画像やボーダー枠画像などのCSS3機能はいずれも表示出来ない。
　　 なお、navボタンの表示はIExplorer 8（下図）では可能だが、IExplorer 5, 6, 7では不可（正規は上図）。
　
　
　
　
　
　歴代IExplorerのCSS3 PIE＋IE-CSS3によるCSS3機能の実現能力
　
　　IExplorer6〜8のCSS3用スクリプトビヘイビア「CSS3 PIE」の使用方法は、こちらのページを参照。
　　以下、タイトル文字の陰影に「IE-CSS3」も併用したIE6〜8対応試験用サンプルページを歴代
　　 IExplorerで表示した成績を提示した。
　　なお、<meta http-equiv="X-UA-Compatible" content="chrome=1">タグは記述していない為、
　　 IExplorer＋Chrome Frameを使用にしても作動しません
　
　
　 IExplorer 8： CSS3 PIEでボックスの角丸, ボックス陰影, ナビゲーションの表示及び背景画像の
　　複数表示が可能となる。IE-CSS3で文字陰影の表示が可能となる。しかし、
　　ボックス透明化の実現不可。背景画像をプロパティ通りに実現出来ない（attachmentはスク ロール
　　 に、no-repeatは繰り返しに適用されてしまう）。ボーダー枠に画像表示を上手く実現出来ない。
　
　
　
　 IExplorer 7：IE8の不都合に加えて、更に背景画像の表示を実現出来ない（模倣表示は上図）。
　
　
　
　 IExplorer 6：IE７の不都合に加えて、navボタンの表示不可。何故か？IE6でのみ文字陰影実現
　　 用に併用した「IE-CSS3」で文字陰影の実現が出来ない（模倣表示は上図）。なお、ある報告に
　　 よれば、IEtesterとIExplorer 9を同居させた場合 IEtester上の IE6で filterが動作しないと云う。
　　 但し、Windows 2000環境のIExplorer 6ではnavボタンも文字陰影も実現可能だった。
　
　
　
　 ＜参考＞IExplorer 6：IExplorer 8をインストールしたWindows XP環境において IETester上の
　　 　IE6で表示した場合は IE７と同じ成績で、 IE8の不都合に加えて背景画像の表示を実現出来
　　　 ないが、navボタンも文字陰影も実現可能だ。但し、タイトル文字部分の配列がズレて表示さ
　　　　れ易いが、Windows 2000環境のIExplorer 6でも同じだった。
　
　
サンプルページへリンク
　
　 IExplorer 5.5：文字陰影実現用のIE-CSS3には対応しているが、CSS3 PIEによる実現は全く
　　出来ない。スクリプトエラー多発し、ナビゲーションとSpryWidgetの表示も不可（模倣は上図）。
　
　






| Kenのムービー計画へ ＞動画狂コーナーへ |