クロスブラウザな話

「玩具をネット販売したいからショッピングサイトを作れ。」
始まりはこの言葉からだった。

－－ 略 －－

異なるブラウザで同じ動作がある程度しか保障されていない話は有名だが、それを解消するために開発者の時間と精神力が大量に消費されているのはあまり有名ではない。

要するに上記のような問題である。つまり、異なるブラウザ間の動作が異なった際の解消方法の話。

問題その1
Firefoxでは「__hogehoge__」というスタイルシートの記述は許可されているが、IE6ではだめ。
先頭のアンダースコアを削ったら動いた。
気づくのに3時間かかった俺、涙目。
ちなみに、なぜそんな面倒なクラス名をつけたかというと、Javascript内で要素を勝手に作ってくっつけてるやつのクラス名だから。要は、名前を変更するなよって意味だけ。
他はHTMLファイルに書かれているので適当に編集してもらって構わないというだけの話。

問題その2
以下はFirefoxのみで動作可能

-- javascript --
function check(form) {
  var inputs = form.getElementsByClassName("hoge");
  // do something
}

-- html --
<form name="fuga" action="check(this)">
  <input type="text" class="hoge" value="hohoho" />
</form>

getElementsByClassNameはprototype.jsのdocumentに対する拡張メソッド。IEだとformに対しては使えないと怒られる。
しょうがないので、getElementsByTagNameでinputタグを抜き取って、Element.hasClassName()でクラス名を持っているかチェックして切り抜ける。入力チェックだしこの程度でいいだろう。
誰か、いい方法知ってたら教えて。

問題その3
opacityの話。これはどちらかといえばCSSの話か？
Firefox3は単に「opacity: 0.5」みたいに書けばOK。
IE6は 「filter: alpha(opacity=50); -moz-opacity:0.50; opacity:0.50;」と3行いる。
たぶんこれはCSS2とCSS3の違いか？IE6は古いのでしょうがないといえばしょうがないか・・・

一通り出来上がったら、Firefox3、IE6、7、8とチェックしないとなぁ・・・