Phantasy Garden

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

名前:

機械的スパムを防止するための検証です。以下の画像に書かれている文字列(半角英数字)を入力してください。
Captcha Image
認証:

Information

About this website

サイト名『空想庭園』。御巫 悠が自由気ままに運営しているサイトです。役に立たないコラム書きがメインなのかもしれません。

本サイトはクリエイティブ・コモンズ表示4.0 国際ライセンスの下に提供されています。

Recent Weblog

Recent Comment

Weblog Search

Weblog Category

Friend Links