Numb. » IE http://wp.graphact.com Tue, 24 Jan 2012 08:17:59 +0000 ja hourly 1 http://wordpress.org/?v=3.3.1 VirtualPC + IE6,IE7,IE8 環境構築 http://wp.graphact.com/2010/07/27/virtualpc-ie6ie7ie8/ http://wp.graphact.com/2010/07/27/virtualpc-ie6ie7ie8/#comments Mon, 26 Jul 2010 16:56:59 +0000 hibiki http://wp.graphact.com/?p=1349 表示チェックする際、IETester やスタンドアローン版の IE などを利用することもあるんですが、これらは印刷プレビューがダメだったり、JavaScript がちゃんと動かないことがあるんですよね。印刷プレビュー系の修正作業あたりは Virtual PC が大活躍してます。

URL を OS 入れ直すたびに探していたので、メモ。

インストール

32bit 版の XP を利用しているので、Virtual PC 32bit 版をダウンロードしてインストール。
これだけでは、OS がないので動かすことが出来ないので、OS か、OS インストール済みのイメージファイルが必要です。

Microsoft が無料で OS インストール済みのイメージファイルを配布してるので、これを利用。英語版のみですが、使用するにあたって大きな問題はないです。Vista or XP Pro, IE8 – IE6 までそろっています（2010/07/27 時点）。

あとは、VirtualPC を起動して、それぞれのイメージファイルを指定してあげれば完了。

最初にやっておくと良いこと等

  • このままだと日本語が表示されなかったりするので、MS ゴシック等のフォントを Virtual PC で起動する各 OS に入れておく。
  • テストサイトにアップしてある HTML を表示させたいこともあるので、メニューの編集＞設定、で設定ダイアログを出して、ネットワーク＞アダプタ、で「共有ネットワーク（NAT）」を選択してインターネットにつながるようにしておく。

ファイルはドラッグ＆ドロップで Virtual PC の仮想環境デスクトップにコピー出来るので、コーディングしたものをローカルで表示チェックをしたい場合はフォルダごとコピーしてます。

Web 制作をしてる方は、Virtual PC 入れておくと便利ですよー。そんなに大変ではないので是非。オススメです。

]]> http://wp.graphact.com/2010/07/27/virtualpc-ie6ie7ie8/feed/ 1 IE8 に関するコーディング関連のまとめ http://wp.graphact.com/2010/07/22/ie8-meta-switch/ http://wp.graphact.com/2010/07/22/ie8-meta-switch/#comments Thu, 22 Jul 2010 12:17:18 +0000 hibiki http://wp.graphact.com/?p=1419 主に自分のための情報ですが、あちこちに書き留めていたのでまとめて公開しておきます。間違いなどがありましたら、ご指摘お願いします。

IE8 基本情報

IE8 にはレンダリングモードが複数ある。詳細は以下のサイトを参照。

少し古い情報ですが、以下サイトも参考になりました。

あまり気にする必要はなさそうですが、以下の点も一応知っておく方がよいかと思います。※主に JavaScript 関連で違いがあるようです。

meta タグによるモードの指定方法

表 1 Internet Explorer 8 の互換モード

互換モード値 レンダリング動作
IE=5 Quirks (クワークス) モード
IE=7 Internet Explorer 7 標準準拠モード
IE=EmulateIE7

!DOCTYPE 宣言によりモードが決定されます

  • Quirks モード の !DOCTYPE 宣言の場合は Quirks モード
  • 標準モードの !DOCTYPE 宣言の場合は Internet Explorer 7 標準準拠モード
IE=8 Internet Explorer 8 標準モード
IE=EmulateIE8

!DOCTYPE 宣言によりモードが決定されます

  • Quirks モード の !DOCTYPE 宣言の場合は Quirks モード
  • 標準モードの!DOCTYPE 宣言の場合は Internet Explorer 8 標準モード
IE=edge Internet Explorer 8 と将来のすべてのバージョンのブラウザーがサポートする最新の標準を使用。実稼働サイトには非推奨

『Internet Explorer 8 開発者向け技術概要より引用』

よく使うようなものだけリストアップします。

<!-- IE8標準準拠モードを指定 -->
<meta http-equiv="X-UA-Compatible" content="IE=8">

<!-- IE7標準準拠モードを指定 -->
<meta http-equiv="X-UA-Compatible" content="IE=7">

<!-- Quirksモードを指定 -->
<meta http-equiv="X-UA-Compatible" content="IE=5">

<!-- 最新の標準準拠モードを指定 (IE8が最新バージョンの場合なら、IE8標準準拠モードとなる) -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

複数のバージョンを指定した場合については、後述。

各モードの内容

IE8モード
CSS 2.1やSelectors APIなど、Web標準を強く意識したモード。
IE7モード
IE7の標準準拠モードと同じ
IE5モード
IE7やIE6の互換モードと同じ

その他モードについては、最初にあげたサイトなどを参照。

モードの複数指定をおこなった場合

meta スイッチには、下記のように複数のレンダリングモードを指定することが可能。

<meta http-equiv="X-UA-Compatible" content="IE=7; IE=9">

metaスイッチをサポートする今後のIEは、指定される値の中から、一番適したモードを選択します。上記の例ではIE7モードとIE9モードを選択していますが、IE8でその文書を表示させると、IE8モードではなくIE7モードでレンダリングすることになります。

『IE8のモードスイッチ | Web標準Blog | ミツエーリンクスより引用』

今のところ、一番多く使うのは IE7 モード指定でしょうか。あまり使わない方が良いのかもしれませんが、保守サイトなどが IE8 で見ておかしい場合などの対応には手軽です。

]]> http://wp.graphact.com/2010/07/22/ie8-meta-switch/feed/ 0 IE8 http://wp.graphact.com/2009/03/25/ie8_release/ http://wp.graphact.com/2009/03/25/ie8_release/#comments Wed, 25 Mar 2009 08:16:52 +0000 hibiki http://wp.graphact.com/?p=968 IE8 のことを知るためには以下を一読。

現時点で Dojo Toolkit が IE8 で上手く動いていません。次の Dojo の ver UP で直されそうなのでに期待。

ライブラリが動かない等、過去に制作したサイトが崩れたり問題が起きている場合、レンダリングモードを変更して過去の IE 互換レンダリングで表示させておくことが必要。

IE8 にはレンダリングモードが複数あります。詳細は以下のサイトで。

1 年弱前の記事ですが、こちらも参考になりました。

ただ、IE8 の互換モードと IE7 は全く同じではないということで、そのあたりも注意が必要ですね。

正直レンダリングモードが複雑化しすぎている気がします。せっかく「 hasLayout から IE8 で逃れられた！（＝ IE の面倒なモノはなくなった！）」と思ったのになぁ。まだ面倒ですね。
とりあえず、「Internet Explorer 8 開発者向け技術概要」を片手にがんばります。

]]> http://wp.graphact.com/2009/03/25/ie8_release/feed/ 0 CSS で指定した背景・ボーダーが IE で出ない時のメモ http://wp.graphact.com/2008/01/25/119/ http://wp.graphact.com/2008/01/25/119/#comments Fri, 25 Jan 2008 00:19:00 +0000 hibiki http://www.graphact.com/memo/2008/01/25/177 Firefox、Opera では問題ないが、IE6 でのみ起きる現象。

現象：position を使っている要素のすぐ後ろの要素で、背景やボーダーが表示されなくなることがある。

対処方法：「position: relative;」を背景やボーダーがある要素に指定してあげる。

この現象が起きる場所付近をコメントアウトしながら原因を探して、position をコメントアウトするとこの現象が起きないことを確認。
ということで、おそらく原因は position 。
position が関係してるならと position: relative; を背景・ボーダーが消える要素に付けたらキチンと表示されるようになったので OK。

でも具体的に原因がよく分からないからスッキリしない…なんだろな。
CSS バグリストざっと見た限りだと該当しそうなものがないような、後でもう一度確認しよう。

Internet Explorer (Windows) CSSバグリスト
Internet Explorer (Windows) CSSバグリスト

]]> http://wp.graphact.com/2008/01/25/119/feed/ 2