どうも仕事が回ってこないので言っていたADVシステムの公開を行うためにページを作っています。

で、そのときのいろいろな問題です。一応プログラマを名乗っていますのでJavaScriptをいろいろと使って見やすいページ構成を行っていますが・・・

InternetExplorerってかなり「問題児」なブラウザに思えるのですが・・・

今日作っていたのはADVシステムの各種命令の仕様を閲覧する部分です。MSDNみたいなヘルプをhtmlで見えるようにすることを考えていました。

で、それをやるために以下の要素を取り入れてページを構築しています。

• CSSによる擬似フレームで画面を構築
• メニューを擬似的にツリービューのような形に
• コンテンツ部の書き換えはAjaxを使ってページをリロードしなくても読み込めるように
• コンテンツ部でも複雑な物はJavaScriptによる動的なページ作成を使って簡単に

で、これらすべてでInternetExplorerとFirefoxの差を見てしまいました。

ちなみに、Firefoxの方は何もしなくてもそれなりに自分の思ったとおりのレイアウトが出てくれたのでまずそちらで作ってからInternetExplorerでの表示を合わせることにしました。

Webページを作るときはFirefoxを基準に作った方が簡単なように思えてきた今日この頃です。

組んでいるときのバージョンはInternetExplorer9およびFirefox6を使っています。

その1:CSSによる擬似フレームで画面を構築

擬似フレームに関しては適当に検索すればCSSを使ったやり方であれば書いてあるのでそちらを参考にしてください。

私の場合はそのときに起こるInternetExplorerでの問題点についてです。

InternetExplorerではそのまま組んでもスクロールバーが画面全体に反映されてしまい、擬似フレーム状態にならないんですね～。これが。

この状態なったときの解消法は、というと「HTML文章に!DOCTYPEタグを記述して正しくHTMLのバージョンをブラウザに提示する」という物だったりします。

Firefoxではこんな物を書かなくてもちゃんと処理されるのに・・・。互換表示のためですか・・・。

その2:メニューを擬似的にツリービューのような形に

メニューを作るときに使うタグがulタグなのですが、これの字下げ処理がInternetExplorerとFirefoxで異なっているというのがやっかいな処理です。

これも検索で出てくるので詳しい説明は省きますが、

ということで、どちらも字下げ幅は同じなのですが、ちょっと設定のされ方が違っているためにスタイルシートには必ずmarginとpaddingの両方を記述しないとだめという物です。

Firefoxだけで整形するならpadding-leftによる字下げ幅設定だけでよいのですが・・・。

その3:コンテンツ部でも複雑な物はJavaScriptによる動的なページ作成を使って簡単に

というわけで、面倒なのでテーブル作成の一部をJavaScriptによる作成にしました。

さすがに要素の部分で市松模様っぽくしようとすると、タグのクラス設定が面倒になりすぎるのと、子要素の部分の表連結数を自分でカウントしたくないのでそれをやらせるためです。

で、作成するとびっくり。Firefoxでは普通にテーブルが表示されるのにInternetExplorerではテーブルが表示されない。これはいかに？

解決法はというと、InternetExplorerでは、動的に生成されたテーブルの要素(tr系)はすべてtbodyタグによって囲われなければならない(これがないとテーブルのメイン要素なしと見なされるらしい)という物です。

・・・独自仕様もいい加減にして欲しくなる感じですね。便利な独自機能ならまだ悪くないのかもしれませんが。

動的作成なので中間にtbodyタグの挿入処理を挟めばいいだけなのでまだましですが、それでもやっかいきわまりないですね・・・。

これからもブラウザの仕様の差で悩むのか・・・

今はこの二つだけですが、あとはGoogle Chromeも取得して試さないとだめになってくるのか・・・と思うと気が重いです。

とりあえず今試しているブラウザでそれなりに見られるようになれば公開に踏み切るつもりです。

そういえば、いつの間にかはてなブログがオープンベータになっている

このブログも移行したいのですが、それは移行ができるようになってからでも遅くないのでは？と思いこちらで書いています。

なお、ADVシステムを公開したときにそれに関するブログははてなブログを新規に取り直して使おうかと思っています。