今まではそこまでブラウザによる表示の差異が気になることはありませんでしたが、問題が浮上してきたのでいくつかまとめたいと思います。

IEにおいてプルダウンメニューの表示

　今回、IEでプルダウンメニューを実装した際に問題が生じました。プルダウンメニューの表示はされるのですが、メニュー内のテキストが表示されないという問題です。原因としてはjavascriptでプルダウンメニューを作成していることでした。元々以下の様なコードでプルダウンメニューを作成していました。

var select = document.createElement("select");
select.innerHTML = "<option>test</option>"

しかしこのように作成するとIEで開いた時にoptionタグの開始タグが記述されないという問題が起こるらしいです。そこで以下のように記述すると解決できました。

    var select = document.createElement("select");
    var option = document.createElement("option");
    option.innerText = "test";
    select.appendChild(option);

しかしinnerTextはFirefoxにおいて使えないらしいです。そこでinnerTextの下に以下のコードを記述します。

    option.textContent = "test";

これを記述すればFirefoxでもきちんと表示され、他のブラウザでも問題なく表示されるはずです。

Safariにおいてlabelタグの使用

　チェックボックスなどを使用する場合にlabelタグを用いるとタグで囲んだ範囲を押すとチェックボックスにチェックをつけれるためとても便利です。今回labelタグ内にselectタグを用いてプルダウンメニューを作成した結果、プルダウンメニューを押すとチェックボックスまで押されてしまうという問題がSafariで起こりました（Firefox, Chromeでは起こらない）。初めはlabelタグの外にselectタグを出して実装しようとしましたが、レイアウトが崩れてしまったため、selectタグが押されたときにonClickをキャンセルするという方法で実装しました。Dojoを用いた場合のコードは以下のようになります。

    var select = document.createElement("select");
    dojo.connect(select, "onclick", function(e){
        dojo.stopEvent(e);
    });

　また、labelタグ内でdivタグを用いるのは推奨されてないらしいのでspanタグを用いましょう（ブロックレベル要素が推奨されていない）。