IE 固定幅セレクトボックスでオプションが長いと切れる問題への対処法

システム開発

Microsoft Internet Explorerにはほとほと困り果てております。


先週もはまっちゃってねぇ。ポピュラーな問題みたいなんですよ。IEの仕様らしい。でも、完璧な解決策が探しても見あたらなかった。
ネットで検索すると、

とかが出てくるのですが、どれもこれも、「Firefoxと同じような動きにして♪」というお客様のご要望に添い、さらに修正工数をあまり消費しないという観点からは残念ながら不十分でした。


で、いろいろやってみた過程と最終的な解決法はこれです。

IE6以外では表示崩れるかも知れません。たぶんIE7と8だと大丈夫だと思うんだけれど持ってないし入れる気も無いので検証してませんしする気もありません。
むろん、仕事で作った画面はそのあたりまで考慮してますけど、こちらは趣味でやっているのでね(笑)。




試行錯誤してここにたどり着きました。onfocus、onblur、onmouseover、onmouseout、onclick、onchangeといろいろなイベントで動きを組み合わせてみた結果こんな感じになりました。今回は、onmouseoverとonblurとonchangeというまったくつながりのないイベントを３つ使うことでイメージに近い動きを実現することができました。


リンクのサンプルではそこまでサポートしていないのですが、実は同じIEによってもバージョンによって動きが違います。IE6とIE7とIE8、それぞれ微妙に違います。自宅にインストールする気は無いので、IE7以降ではサンプルを検証していないのですが、セレクトボックスの隣のテキストボックスがセレクトボックスの上に表示されるかも知れません。画像を置いておいたら消えないって言う現象は確認したのですよ。実際にはセレクトボックスの幅を変える時に画像のvisibilityを変更しています。
やむなく実際に作ったシステムではブラウザはもちろんバージョンまで加味して違うHTMLとJavaScriptを生成するように仕込みました。もう泣きたいです……。
当然この先、とある問題が起こるのですよ。IE9が出たらどうなるのかという……。でもどうにもなりません。ここまでバージョンによって表示に差異があるという事実を踏まえると、IE9でどういう表示になるかなんて事はユーザーにはわからないのはもちろんのこと予想することもできないのですよ。だから、可能性は低いのですが論理的には正しいと思われる、「IE9では他のブラウザと同様の表示に修正される」という前提で作ってみました(笑)。


そもそもね。IEがおかしいと俺は思うのですよ。それに開発者やデザイナーが合わせるってのはなんか納得いきません！(笑)。それによって雇用を産み出そうとする生暖かいお心遣いなのでしょうか？


今回の解決策でも「Firefoxと同じに」というお客様からの要望は完全には実現されませんでした。お客様に納得してもらうために、同様の問題に悩んでいるメジャーなサイトを探したのですがみつかりませんでした。どうやら、optionの文字数が可変のセレクトボックスは使わないようにするというのがトレンドのようです。本末転倒だと思うんですけれどねぇ。


そんな中、乗換案内のジョルダンのサイトがセレクトボックス使っていたのですよ。

出発と到着の履歴がセレクトボックスになっています。
それを見て鉄の血が騒ぎ……。長い駅名を入れてみて表示を確かめてみました！


南阿蘇水の生まれる里白水高原
・
・
・
あれ？崩れない。何でだろう……。
・
・
・
白水高原 に自動変換されてしまった……




まぁね。普通だったら「IEの仕様なのでもうちょっと幅を広げるという対応でどうでしょうか？」で終えると思うのですよ。そしてそれがおそらく正しい職業プログラマーだと思いますね。おれは職業プログラマーとして２流なので、個人の興味も手伝ってなんとかしようとしちゃうんですよねぇ。正直こんなところに工数を使うのはもったいないんですけどね。


まぁ、この問題、根本的な解決策は２つしか無いと思うんですよ。

  • １．可変長文字列がオプションに入る可能性がある場所ではセレクトボックスは使わない
  • ２．どうしても使うのならIEでは制約があることを明記し、場合によってはIE非対応とする。

この２つが使えない場合は、こんなやり方があるのかという参考にして頂ければ幸いです。


そして、なにより未来の自分が同じ所で悩んだ時に、この記事を検索で見つけられればうれしいなぁと思います(笑)。