ホーム >> 左脳Script >> Java Script >> テーブルのスタイルにおけるブラウザの差異

テーブルのスタイルにおけるブラウザの差異


微妙なタイトルの記事ですが、私がフラッシュを使おうと決心した最後の原因を少々。

この問題に突き当たるまでにも、クロスブラウザの手間に難儀していて、煮詰まるを通り越しストレスが焦げ付き始めていました。世の中の Webデザイナーに本気で敬意の念を抱き始めた頃でした。

HTML でテーブルタグを使って四角いカーソルを作ろうとしたときの事。Firefox で、テーブルが全く表示されないという事態に遭遇。Internet Explorer や Google Chrome では、意図通りの表示をするのに。結局、該当部分のコードを抜き出して試験する事に。以下のような試験コードを各ブラウザで実行すると・・・



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD> 
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE></TITLE>

<script type="text/javascript"><!--

window.onload   =   function()
{
    var tb;
    var bd;
    var tr;
    var td;
    //
    tb  =   document.createElement("table");
    tb.style.border =   "outset 1 #808080";
    tb.style.position   =   "absolute";
    tb.style.top        =   0;
    tb.style.left   =   0;
    tb.style.zIndex =   7;
    tb.cellSpacing  =   0;
    tb.cellPadding  =   0;
    bd  =   document.createElement("tbody");    tb.appendChild(bd);
    tr  =   document.createElement("tr");       bd.appendChild(tr);
    td  =   document.createElement("td");       tr.appendChild(td);
    //
    div =   document.createElement("div");  td.appendChild(div);
    div.style.position  =   "static";
    div.style.width     =   32;
    div.style.height    =   32;

    document.body.appendChild(tb);
};

// --></script>

</HEAD>
<BODY>

</BODY>
</HTML>


Internet Explorer
ie.PNG

Google Chrome
chrome.PNG

FireFox
firefox0.PNG
枠が出ません。そこで、アレやコレやと検索してもそれっぽい情報にヒットせず、半ばあてずっぽうで以下のような変更をしてみる。


tb.style.border = "outset 1 #808080";

      ↓以下のように変更

tb.border = "outset 1 #808080";


firefox1.PNG

ナヅェナンディスカ!

「FireFox はテーブルのスタイルを style から指定できない。」というバグだか仕様だかが存在している模様。私が css を使わずに実装しようとしたのが間違いだったのかも知れません。

原因が判れば、ブラウザの種別判定で記述を分ければ動くモノは作成出来ます。が、その時は私自身がテンパリ気味だった事、Flash の Action Script に対する興味が非常に大きかった事などがあり、この時点で「クロスブラウザで頑張る気力」がすっかり萎えてしまいました。

FireFox が悪い訳ではないのです。積もり積もったナニかがあって、それに止めを刺したのがたまたまこのような事実だったと。

その時、手掛けていたコードが結構重かったのもあってAction Script に鞍替えしたのですが、Flash にしても結局重かったというオチがあったりします。まぁ、クロスブラウザの呪縛から開放されただけでも相当やりやすいので、後悔はしていません。容量も大幅に減るシネw。


後ほど判ったことですが、Flash ではなく Java Script じゃないと出来ない事、というものも存在します。「画面上での右クリックに独自機能を持たせる」等。Flash でも出来ない事は無いようですが、セキュリティの問題からか必ずメニューが表示されるので、凝った事をしようとすると使い勝手が悪い所もあります。

まだまだ現状は必要に応じて組み合わせるのがベスト。オンリーワンは今のところ無いようです。




トラックバック(0)

トラックバックURL: http://n-yagi.0r2.net/sanoupulurun/mt-tb.cgi/5

コメントする

ホーム >> 左脳Script >> Java Script >> テーブルのスタイルにおけるブラウザの差異

アーカイブ

このブログ記事について

このページは、n-yagiが2009年4月10日 22:20に書いたブログ記事です。

ひとつ前のブログ記事は「Action Script 事始め」です。

次のブログ記事は「今更な「無料Flash開発環境」を取り巻く環境について」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

Creative Commons License
このブログはクリエイティブ・コモンズでライセンスされています。