PB-100の宇宙の中の人
PBロッキーの日記

アプリのIE6対応に嵌る

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

ただ、よくよく考えて、はたしてPBに関連するページを制作したい!という確固たる意思をもってこのアプリに向かう人がいるのか、というとそれは絶望的なわけです。
むしろ、なんとなくチャカチャカいじっているうちにできたイメージをBlogとかに貼りたい、という状況のほうが多いのかな、という流れを考えると、やはり多くのアクセスを占めるIEへの対応は欠かせないわけです。

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

o.. rz

以下はほんとメモ書きになってしまって恐縮ですが、
  • html1行目のxml指定を削ってIE6の後方互換モー突入を回避。
  • <br clear="all" />をfloatレイアウトをしている周りに適宜入れる。
  • なんか表示されない<input>エレメントがあると思ったら、metaにキャラセットを指定したら表示してくれた。value値に全角文字があったので、って。。。
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
~と基本的な調教が済んで:hover周りに入ります。
まずはIE6でも:hoverを可能にするスクリプト、csshover.htcを使用しました。
こいつの注意点として、DLしたら文字コードが現在製作中のHtmlと一致しているかチェックします。(← ここで嵌った)
なんとかホバーしてくれましたが、動作がもっさりする上、一部の要素に反応してくれません。原因はよくわからないのですが、:hoverを入り組ませて画面を切り替えている場合には不適のようです。(ie7.js も同様)

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

かなりの時間右往左往しましたが、もうこの部分はjsで対処するしかないようです。
この:hover周りに関しては、IEのみ別にコードを用意するとします。

今日思ったこと:
MSはいいからもうブラウザ作るな。。。