2008年10月10日

mixiチェック
ふぅ〜、やっと問題解決。
とあるサイトをCSSを使い、レイアウト。
一応、IE7、FireFox、Opera、Safari(Windows版)、Chromeでほぼ似たようなレイアウトになること、リンクに問題がないことを確認。
だからアップをしたのだが、「ボタン押しても何もならないよ」と連絡あり。
formタグ内にsubmitボタンを置けばよかったのだが、CSSとの関係でbottonタグをリンクでくくってみた。
FireFox、Opera、Safari、Chromeは問題ないが、IE7だけが動かない。
急ぎ対応しなければならなかったので、今回はなるべくJavascriptを避けたかったが、IEのためだけにjavascriptを入れて解決。

しかし、それ以上の大問題が発生!!
Windows XPでアクセスすると、レイアウトが思いっきり崩れる。
テスト確認する上で、IE6が欠けていたのがまずかった。
手元にWindows XPのノートパソコンがあるのだが、バッテリーに問題があるため、起動して使用できるのが10分程度しかない。
(バッテリーだと思うが、メモリーかもしれないが、突然堕ちる)
今、メインで使用しているのは、Vistaである。(ダウングレードPCは持っているが諸事情でVistaが必要なので)
そのため、IE7でしか確認できない。
XP ProのDSP版を持っているし、VMW WS5を持っているので仮想化すれば動かせるのだろうが、それをやっている時間がない。

そこで「IETester」を入れてみた。
若干、おかしな挙動はあるものの、IE5.5、IE6、IE7、IE8βが使える。
動作チェックをしながら、修正するにはちょうどいい。
(最終は古いXPマシーンで確認)

レイアウトの崩れは解消された(...実はトップページだけ)
一通り、他のブラウザでの確認もしてアップ。
ほっとしていたら
「XPで確認しようとすると、砂時計のままになる」と連絡あり。
「IETester」とXPで確認したつもりでいたが、レイアウトに気をとられていたようだ。
XPで確認した時、なぜかうまく動いたような気がしたのがよくなかった。

改めてCSSを調整。
たぶん透過PNGを使っているのが原因かと思い、すべてを透過GIFに変換。
これでうまくいくと思ったら...全然変わらず。
なぜだ!!

タグを一つづつ、CSSの記述を一つづつ、コメントアウトして原因を探る。
どうも挙動を見る限りでは、ループを起こしているようなのだが、先に書いたようにあえてJavascriptの使用は控えている。
特にトップページで使っていると言えば、Google Analysticsぐらい。
レイアウトの調整も各タグの幅を調整しただけである。
なのに...

そして本日、根本原因を突き止めた。
div.foo {
    max-height: 2000px;
    height:expression(document.body.clientHeight < 1000? "1000px": "auto" );
    min-height: 1000px;
}
この記述である。
参考にしたテンプレートに似たような記述があり、それを使って最初のレイアウトを作っていた。
「まぁ、古いIEではこの記述は無視されるのだろうなぁ」
確かに「IETester」でIE5.5のテストをしたところ、無視しているようだった。
しかし、IE6だと無限ループを起こす。
結局、この部分と似たような記述の部分をコメントアウトし、高さの設定を修正した。
すると、IE6でもあっさりOK

Javascriptはブラウザの違いを気を付けないと、エラーだらけになるが、CSSのエラーは無視されるだけと高を括っていたのがまずかった。

しかし、マイクロソフトはいつまでIEと言う独自仕様を続けるのだろうか?
IE8で本当に解決できるのだろうか?

最近、メインブラウザはChromeとFireFoxになってきた。
以外に使えるのはSafari。βの時は問題だらけだったような気がするが、現状では全然問題を感じない。

でもIEだけは、Windows Updateが何かをするたびに不具合を起こしてくれる。
もう、IEなんていらないよ。
不具合だらけだし、起動も表示も遅いし
やっぱり、メインOSをLinuxに移して、VMでVistaやXPを動かすべきかなぁ
それとも確認用のUMPCを用意すべきか....

まずい、物欲が...


(23:53)

コメントする

名前
 
  絵文字