いつまでもIE7を毛嫌いしているわけにも行かないので、気は進まないけどIE7をインストールしてみました。とは言え、IE6で確認できる環境は残しておきたい。

ってなわけで、「IE6 IE7 共存」でググって色々と調べてみました。で、IE6をデフォルトに使いたいならIE7のスタンドアローン版を、IE7をデフォルトにするならIE6のスタンドアローン版を入れるのが一番良さそうです。↓の小粋空間様のエントリーが参考になったのでとりあえずご紹介。

http://www.koikikukan.com/archives/2006/11/08-005050.php

こちらの記事ではIE7のスタンドアローン版のインストール方法が紹介されています。実際に試してみたところ、確かに動かすことが出来ました。……とは言え、やっぱり本物と比べると色々と不具合もあるみたいで、今後のアップデートにもそこまで期待できないのが痛いところ。あくまでIE6をメインに使っている人がIE7での表示確認用に使う、という使い方に限定される感じです。

そんなわけで、IE7のスタンドアローンがあるならIE6のスタンドアローンもどこかにあるんだろ、ってことで探してみると、やっぱりありました。（何処から落としたのか覚えて無いけど）IE5.5以前のスタンドアローン版は以前から入れて確認してたのですが、IE6は初めてみつけたので少し嬉しかったり。意外とメジャーみたいだったけど一応ご紹介。

http://browsers.evolt.org/?/ie/32bit/standalone

IE5.5以前のバージョンも公開されてるみたいなので、旧バージョンのブラウザの表示を確認してみたい方は使ってみるといいかと。実際に試してみたところ、IE6.0については今までの環境と同じように見れたので問題無さそう。これなら、IE6の表示を確認できる環境を残したままでIE7にアップデートできるな、ってことで安心してIE7にアップデート出来ました。

特に、IE6以前のバージョンではヘッダーでXML宣言をするとCSSの解釈モードが「後方互換モード」とかいう良く分からない独自仕様になってしまいます。Firefoxなどのモダンブラウザとはpaddingやfont-sizeの相対指定の解釈が違っていて、普通にFirefoxのCSSを当てると表示がメタメタになってくれます。なので、今後ともIE6の閲覧環境は必須っぽいです。この辺りは↓の「カスタマイズブログの実験ページ」様のエントリが一番分かりやすかったのでご紹介。サンプル付きでIE6の後方互換モードの違いを紹介されています。

http://www009.upp.so-net.ne.jp/custom/kouhou.html

---

まぁそんなわけで再びインストールしてみましたIE7。↑の後方互換モードになってしまうバグが解消されたのでどうなることやらと思いましたが、MOGSTYLEでこのバグの対処に使ってた↓のハックが使えたので、基本的にはFirefoxで見れれば問題無いみたいです。よかったよかった。

#main h1{
padding:8px 0 0 36px !important;
padding:7px 0 0 36px;
height:41px !important;
height:49px;
}

↑のようなCSSを書くと、IE6以前のバージョンでは「!inportant」を解釈することが出来ないので、順番どおりに下の指定を使ってしまう、というハックです。Firefoxなどのモダンブラウザでは「!important」を解釈してくれるので、上のほうが適用されます。IE7もちゃんとこの「!important」を読み取ってくれるみたいなので、Firefoxで見れれば基本的には大丈夫、ってことになります。まぁ、間違ってたところが直ったんだからコレは評価できるところ。

---

とは言え、やっぱりウチのサイトで言えばコメント部分にスクロールバーが発生するバグとボックスの幅がリンクにマウスオーバーすると小さくなる謎バグは残ってました。……が、何か意外とこれはすんなり直りました。

コメント部分に限らず、この記事が表示されてるテーブル部分は「overflow:auto」を指定してたんですが、これを「overflow:visibble」にすればOKでした。別にautoにしておく理由も無かったのですんなり解決。overflow:autoの判別基準が変わった、ってことなのかな。問題のコメント部分には「float:left」と「float:right」を使ってボックス要素を左右に並べてたから、恐らく左右のfloatがボックスからはみ出してる要素と解釈されたのが原因っぽいです。……まぁ良く分からんバグですな。

で、このバグを修正すると何故かボックス幅が狭まるバグも直ってました。このバグに関しては昔から意味不明。↓の「CSSバグリスト@CSSバグ辞典スレッド」様の記事が参考になるかと。

http://members.at.infoseek.co.jp/cssbug/detail/winie/b102.html http://members.at.infoseek.co.jp/cssbug/detail/winie/b032.html

---

で、細かいんですが大きな変更として、英字フォントがClearTypeになってアンチエイリアスがかかってます。……コレは正直いただけない。アンチエイリアスのかかってない、あのハッキリしたフォントでの描画を意識して作ったデザインだったから（特に上部のメニューと各記事タイトル部分）。せめてCSSでアンチエイリアスをオフにする指定とかが出来ればいいんだけどなぁ。

でも、Vistaの標準フォントのMeiryo（メイリオ）はデフォルトでアンチエイリアスがかかってるんだよなぁ。今のところ確認できる環境が無いからフォントの指定は「MS UI Gothic」にしてあるけど、そのうちMeiryoを指定したほうがいいのかな。まぁまだ考えてませんが。

---

さらに細かいんですが、ClearTypeになったのが原因なのか、各記事タイトル部分の文字が1pxほど下にずれてました。気になる。すごく気になる。でもコレ治したら多分今度はFirefoxがずれるんだろうなぁ……。ってなわけで、IE7のCSSハックを探すことに。で、↓の「Lucky bag:blog」様のエントリーが分かりやすかったのでご紹介。

http://www.lucky-bag.com/archives/2006/06/css-hacks.html

簡単に言えば、「*+html body」という指定ならIE7しか読めないらしいです。ってなわけで、タイトル部分の文字のズレを直すべく実際に使ってみたのが↓の例。

#main h1{
padding:8px 0 0 36px !important;
padding:7px 0 0 36px;
}
*+html #main h1{
padding:7px 0 0 36px !important;
}

上の「#main h1」でfirefoxとIE6以前を定義して、「*+html #main h1」でIE7向けに再定義する、って形にしました。図らずともIE6と同じパディング幅になっているってことは、フォントの描画の位置自体がFirefoxとかと違うんだろうか。まぁとりあえず直ったのでOK。CSS文法的にも一応Vaildっぽいし、よかったよかった。

---

IE7の使い勝手に関してはもうどうでも良いかな。どうせ使うのは「Lunascape」だし。とりあえず自分のサイトがちゃんと見れるようになったしコレにて一件落着。かつて無いほどの長文になってるあたり、IE7とはとことんまで相性がよろしくないみたいです。ハイ。

このエントリーのトラックバックURL

http://mogstyle.net/mt/mt-tb.cgi/198

» IE7をインストールしてみた。 from MOGSTYLE
いや、頼むからこんなに謎バグ残したまま正式版とか勘弁(涙。

トラックバック時刻: 2007/2/18 07:08

Name

Mail

URL

Save

YesNo

感想や意見、質問などお気軽にどうぞ☆