Selectボックスでフォントが明朝体になってしまうIEのバグ

select > option要素内に"┏"などの太い罫線記号を使うとなぜかIEでは明朝体になってしまいます。
意味がわかりません。

症状

確認した限りではIE6、IE7にて、下図のように太罫線記号を頭に入れると明朝体になります。

select要素が明朝体になっちゃう@IE
IEでの表示。3の倍数だけアホ(バグ)になってます。

実際にバグが発生するコード

HTML
  1. <p><select name="" size="9">
  2. <option value="1"> ┏いっこめ</option>
  3. <option value="2"> ┣にこめ</option>
  4. <option value="3">┣さんこめ</option>
  5. <option value="4"> ┣よんこめ</option>
  6. <option value="5"> ┣ごこめ</option>
  7. <option value="6">┣ろっこめ</option>
  8. <option value="7"> ┣ななこめ</option>
  9. <option value="8"> ┣はっこめ</option>
  10. <option value="9">┣きゅうこめ</option>
  11. </select></p>

※select要素のsizeプロパティは特に必要ありません。

対策

3の倍数以外は、"┣"の前に全角空白が入ってます。
これだけ。

なぜか全角文字が罫線記号の前に入れると回避できるようです。
何この意味のわからない仕様っていうかバグ。さすがMS。

半角文字ではだめなようです。&nbsp;等も試してみましたがだめでした。
また、直接font-familyを設定しても無効でした。

もしその他の回避策が見つかったらご一報をお願いします。

そもそも罫線記号なんかselect要素に入れるなって?
大人の事情というものがあるのですヨ…。

  • コメント(0)
  • トラックバック(0)
  • Mixi Check
  • はてなブックマーク数 はてなブックマークコメント

Track back

このエントリーのトラックバックURL

Your Comment





Tag Cloud

About

drop

Author:飴(drop)

web技術に関するtipsや主にweb関連のニュースなどをメモ的に記していきます。

このサイトについて

RSS購読