Firefox HacksのテクニカルTipsにハマっている悠ですが、XUL的なところではなくもっと根本的なIEとFirefoxの違いから悩みが生じます。というかそれは昔から悩んでいたと何度も何度も繰り返し明言してきたわけなんですけど。
たとえばこのサイトのMIMEタイプ。基本的にXHTMLで作ってあるので、普通はapplication/xhtml+xmlを指定しなければならないんですけど、IEがそれを認識しやがらねぇというバグ＝問題を抱えているためにブラウザが送信するHTTPヘッダを確認してPHPで振り分け処理を行っているんです。で、それに起因する問題として、HTMLタグを認識して構文を理解するパーサが異なるということ。携帯電話のブラウザやIEにはtext/htmlを、Firefox等にはapplication/xhtml+xmlを返すんですけど、このときIEのtext/htmlを解釈するパーサは特定要素でCSSのpadding指定値を無視しやがるんです。このおかげでCSSのpaddingを用いてのレイアウトが非常にやりづらい。実際、IEでレイアウトを確認すると、Firefox等のブラウザと違って文字の表示領域が狭く表示されます。
それについてはpadding値をいじらずに別の方法でレイアウトを調整するくらいしか回避方法がないんですけど、そんな正しい指定方法をねじ曲げてまで別指定するほどIEに対する義理はないし、この先IEも修正されたらまた直さないといけなくなるし。
で、そこから導き出された結論が、毒を以て毒を制す。IEのバグで表示が崩れるならIEのバグで表示を直してしまえという非常に乱暴な修正を加えてみることにしました。
具体的に言うと、IEがCSSを読み込む際に生じるバグとしてハイフンが先頭にあるプロパティ（-text-align:など）まで読み込むというものがあります。通常、ハイフンが先頭にあるプロパティは「無視すべきプロパティ」という意味なんですが、IEはそのプロパティでさえも解釈し反映させてしまうというバグがあるんです。これを利用すれば、ハイフンをつけない通常のプロパティ値と、ハイフンを付けたIEにだけ読み込ませるプロパティ値を区別させることが出来、厄介なレイアウト問題も幾分か回避できるようになるですよ。
という長い前置きでしたが、現在body要素に対してIE専用に-bakground-color:#fff;を指定してます。Firefoxでは今までと同様に見えます。IEでは、他のブロック要素と同じ色を指定したので、文字の表示スペースが狭く見えるという問題を少しだけ回避できました。苦肉の策といえばそうなんですけど。
もうちょっと頑張ればハイフン付きプロパティを駆使してFirefoxと同様の見栄えを獲得することも出来るかも知れませんが、ンなことするならそもそもPHPでCSSの振り分けをしたほうが簡単そうな悪寒。IE7になってもこんなバグが残っていたらと思うと((゜Д゜;))ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙですね、ハイ。
クライアントアプリ開発なら、JavaよりもXULのほうが互換性に優れていると思うんですけど、その前にGeckoエンジンがなければ話にならないというお話。つまりFirefoxがなければダメなんですよ、と。XULプログラマになりたいけど、マイナーな開発者だよねぇ。
Comment