アプリのIE6対応に嵌る

PB Display Image Makerは、当初、Firefox や Webkit(Safari, Iron)、Opera などの(まっとうな)ブラウザのみに限定して、メイカーで生成した HTML については、 IE を含む主要なブラウザで、と考えておりました。

ただ、よくよく考えて、はたして PB-100 に関連するページを制作したい！という確固たる意思をもってこのアプリに向かう人がいるのか、というとそれは絶望的なわけです。

むしろ、なんとなくチャカチャカいじっているうちにできたイメージをブログとかに貼りたい、という状況のほうが多いのかな、という流れを考えると、やはり多くのアクセスを占める IE への対応は欠かせないわけです。

などと考えつつ、今まで怖くてやっていなかったのですが、アプリを IE6 で表示してみると茶吹いた ww

o.. rz

以下はほんとメモ書きになってしまって恐縮ですが、

• HTML 1行目の XML 指定を削って IE6 の後方互換モー突入を回避。
• <br clear="all" /> を float レイアウトをしている周りに適宜入れる。

• なんか表示されない <input> エレメントがあると思ったら、<meta> にキャラセットを指定したら表示してくれた。value 値に全角文字があったので、って｡｡｡

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

IE6でリンク以外でマウスホバー

と基本的な調教が済んで :hover 周りに入ります。

まずは IE6 でも :hover を可能にするスクリプト、csshover.htc を使用しました。

こいつの注意点として、ダウンロードしたら文字コードが現在製作中の HTML と一致しているかチェックします。（← ここで嵌った）

なんとかホバーしてくれましたが、動作がもっさりする上、一部の要素に反応してくれません。原因はよくわからないのですが、:hover を入り組ませて画面を切り替えている場合には不適のようです。（ie7.js も同様）

また<a href="#">を挿入した変更(a:hover)もやってみまして、こちらはキビキビと動いてくれました。しかし、致命的な不具合がありまして表示を切り替えたいときに、 <input> や <textarea> などの要素だけが画面に残ってしまい無残なありさまです。

（IEは再描画周りの不具合が多いようで、以前も随分苦しめられました）

かなりの時間右往左往しましたが、もうこの部分は Javascript で対処するしかないようです。

この :hover 周りに関しては、IE のみ別にコードを用意するとします。

今日思ったこと

Microsoft はいいからもうブラウザ作るな｡｡｡