IE8、IE7、IE6のシュミレーター、アドオン・拡張機能

IEの表示対応していたら、こんな時間に。

古IEへの対応作業。この作業は、意味のある作業だけど、有意義な時間には全く感じない。CSS3でつくったカワイイ角丸ちゃんは角刈りになり、かっこいシャドウも無く、奥行き無し!

スムーズに解決できないポイントがあったので、この機会に色々チェック!そしてメモ。

Windows製シュミレーター:Expression Web SuperPreview

Expression Web SuperPreview を使用すると、異なるブラウザー間での Web サイトの互換性に関する主なデバッグ作業をすばやく行えます。Web ページをデバッグするときに、開発用コンピューターと同じコンピューターで Web サービスを使用する必要はありません。

だそうです。

ダウンロードこちら。
公式のダウンロード センターから Expression Web SuperPreview をダウンロード

IEチェック

IE6~8を2画面で見比べれるという機能付き。
インストール型。ソフト重い。インストール遅い。

そして、いざサイトチェック~!

IE6とIE8を見ながら、ソースもチェックできる~っ!やったぜ~!!
ってなる!?

CSS見せてくれよ。要素を検証機能が使いたい!必要なのはそれだろ!(やり方わからないだけかもしれないけど。)
何より、読み込み、遅すぎ。使い物にならず。次っ!

FireFoxアドオンのシュミレーター:IE Tab

Firefox の中で Internet Explorer (IE) のレンダリングエンジンを使用して Web ページを表示できる「IE Tab」アドオンの Firefox 3.6 対応版です。既存の IE Tab の設定は自動的にインポートされます。IE 以外のブラウザでの閲覧が制限されているサイトを開きたいときに利用できます。

ですって。

ダウンロードこちら。
拡張機能 » IE Tab V2 (Enhanced IE Tab)

拡張機能 » IE Tab V2

FireFoxにてアドオン追加後、右下の小さいアイコンから、
IE・FireFoxの表示切り替えが可能に。

動作もサクサク~!IE7~9までOK。(IE6はもう捨てたのね。)
こりゃいい!よし、要素検証だ~!

・・・。できない~!
右クリックで表示されるツールもIEになっちゃうのね。

GoogleChrome拡張機能、IE Tab / IE Tab Multi

IE Tab

ダウンロード:IE Tab

IETabでウェブページを表示。ActiveX、Sharepoint、ICBC、alipayに対応。高速で安定、高信頼性で、誰からも愛されています。

だってさ~。

やっぱりGoogleChromeだよね。
ということでチェック~!
img3

要素検証できるかな・・・?

・・・。

できない~!おつかれさまでした~。

IE Tab Multi

ダウンロード:IE Tab Multi

ChromeでのIE表示をマルチタブスタイルで提供する最も優れた拡張機能です。

img4

なんじゃこの画面は~!?
シンプルLOVEのこの時代に。この画面。。

このソフトについての使い方を調べていると、色々なブログに辿り着きました。

「Google Chrome 拡張機能ギャラリー」で「IE Tab」よりも便利な「Chrome IE Tab Multi」という拡張機能を見つけました。「 Chrome IE Tab Multi!」名前の通り、IE Tab の画面内に、さらにタブで開くことができるため、IE で開きたい複数のページを効果的に処理できます。

Chromeのさくさく動く環境は好きだけど、タブの体裁はInternet Explorerの方が好みという方、Chromeのブラウザ内でIEタブを使ってみませんか?Chromeに拡張機能「Chrome IE Tab Multi」をインストールさせれば、それが実現します。

GoogleChromeのブラウザでIEタブ・・・?
そんなニーズあるのか。

案の定、要素検証できず。

InternetExplorer

そして最終手段。IE8で不具合が出ていることは、これらのシュミレーターを使ってよ~くわかった。
しかし、ソース特定できないので、もうこれしかない~!

・・・シュミレーター使えず、ついに本物登場!

InternetExplorer 8

F12キーまたは「ツール > 開発者ツール」でHTMLコードとCSS出せます。上のメニューに表示されているアウトライン機能を使えば、Divやimgの余白・マージンが表示されます。

GoogleChromeやFireFox程のスピード感は無いけど、一応その場でCSS編集出来て、リアルタイムに反映されます。そして、原因のCSSをスムーズに特定することは困難ですが、かなりヒントにはなります。

IE8以降についてる機能で、IE7以降~利用中バージョンのIEまで使えます。
ここでもIE6は捨てられてる。

そんなこんなで、CSSハックなんかを使い、時間はかかってしまったけど、無事解決。
お疲れさまでした~。