selectのoptgroupで、labelが表示されない(Mac IE)

暑いですね〜みなさん。ｍｄが住む青森県も、連日３４〜３５度まで気温が上昇....関東かココは(^^;)。

で、ｍｄにしては珍しく、ｗｅｂデザインネタ。

現在MT＆XHTML+CSS(通称「ｗｅｂ標準」とか「ｗｅｂスタンダード」ってやつね)を用いて、商用サイトを作っています。

ターゲットブラウザはIE6.0やFirefoxとか、まぁ最近のブラウザです。でも、いちおーMacユーザーなので、念のためMac IEの挙動はチェックしてます。

つーのも、今でこそSafariがあるけど、一時期のMacのデフォルトブラウザはIEでした。そのため、そこそこの数ユーザーがいるんですね。

Mac IEと言ったら、WIN IEにはないような機能があったり、ルック＆フィールがミョーにMacっぽかったりなど(MSに移った元Appleの社員が作ったらしい)、なかなか面白いブラウザです。

しかし実際は、やたらバグが多いことの方が有名(笑)。特にCSS周りのバグが多く、お悩みのｗｅｂ屋さんも多い事でしょう。私もその一人(笑)。

フォームのselectタグをoptgroupタグでグループ化する

フォームなどで使うselectタグって、optionをoptgroupでグループ化できますよね。項目が多いときは、なかなか使い勝手がいい。

で、これをMac IEでレンダリングすると、「階層化表示」などという、洒落た事をしてくれる。アクセシビリティかどうかは別にして、なかなか面白い機能である。これはこれでいい。

フォームをグループ化する、fieldsetタグとlegendタグ

フォームが複雑だったり項目が多い場合、入力項目をグループ化するために使うfieldsetタグと、グループ化したタイトルに使うlegendタグってものがありますよね。

最近、アクセシビリティという概念が広まってきていて、こういうのにはうってつけのタグ。上記のoptgroupと併せて使いたいと、フツーなら思う。

Mac IEでoptgroupが表示されなくなる？

で、今日フォーム部分をデザインしていたら、いきなりこの問題にぶつかった。なにげにMac IEでブラウズしたら、optgroupが表示されてないではないか。えー、何でーっ

で、これがサンプル。Macな方は、Mac IEで見てね。

Mac IEの画面。optgroupが階層化されている。

このXHTMLのコード

<form action="dummy1" id="ex1">
<h4>fieldsetなしのフォーム(ex1)</h4>
<p>Mac IEで見ると、selectのoptionがoptgroupによって階層化される。かっちょええ。</p>
<p>
<select name="ex1">
　<optgroup label="北海道・東北">
　　<option>北海道</option>
　　<option>青森県</option>
　　<option>岩手県</option>
　　<option>秋田県</option>
　　<option>宮城県</option>
　　<option>山形県</option>
　　<option>福島県</option>
　</optgroup>
　<optgroup label="関東・甲信越">
　　<option>茨城県</option>
　　<option>栃木県</option>
　　<option>群馬県</option>
　　<option>埼玉県</option>
　　<option>千葉県</option>
　　<option selected="selected">東京都</option>
　　<option>神奈川県</option>
　　<option>新潟県</option>
　　<option>山梨県</option>
　　<option>長野県</option>
　</optgroup>
</select>
</p>
</form>

がしかし

しかーし、これにfieldsetとlegendを組み合わせると、optgroupのlabelが表示されない。階層化はされているんですけど、階層化されたタイトルが表示されなくなった。以下がサンプル。

Mac IEの画面。optgroupのlabelが表示されない。

このHTMLのコード

<form action="dummy2" id="ex2">
<fieldset>
<legend>fieldsetとlegendを使うと...</legend>
<h4>fieldsetありのフォーム(ex2)</h4>
<p>fieldsetの中で、optgroupを使ってselectのoptionを階層化すると、
MAC IEでoptgroupのlabelが表示されない。</p>
<p>
<select name="ex2">
　<optgroup label="東海・北陸">
　　<option>富山県</option>
　　<option>石川県</option>
　　<option>福井県</option>
　　<option>岐阜県</option>
　　<option>静岡県</option>
　　<option>愛知県</option>
　　<option>三重県</option>
　</optgroup>
　<optgroup label="関西">
　　<option>滋賀県</option>
　　<option>京都府</option>
　　<option selected="selected">大阪府</option>
　　<option>兵庫県</option>
　　<option>奈良県</option>
　　<option>和歌山県</option>
　</optgroup>
</select>
</p>
</fieldset>
</form>

というわけで

これは、Mac IEのバグですか？。それとも、ｍｄがどっか間違っているんでしょうかね...？。