エントリー記事

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


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

で、mdにしては珍しく、webデザインネタ。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

fieldsetなしのフォーム(ex1)

Mac IEで見ると、selectのoptionがoptgroupによって階層化される。かっちょええ。

Mac IEでoptgroupを使った画面のキャプチャ
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が表示されない。階層化はされているんですけど、階層化されたタイトルが表示されなくなった。以下がサンプル。

fieldsetとlegendを使うと...

fieldsetありのフォーム(ex2)

fieldsetの中で、optgroupを使ってselectのoptionを階層化すると、Mac IEでoptgroupのlabelが表示されない。

Mac IEでoptgroupをfieldsetで囲んだ時の画面のキャプチャ
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のバグですか?。それとも、mdがどっか間違っているんでしょうかね...?。