REDLINE MAGAZINE | Firefox3とFirefox2のselectの幅

Firefox3とFirefox2のselectの幅

そんなこんなで共存することにしたFx3とFx2なんですが、さっそく共存させてよかったと思った事がありました。

今コーディング中のサイトでこういう見た目にしたいデザイン部分があったんですよ。単純にリストをfloatさせてselectを横並びにしたいーみたいな。

幅違うやん！って気づいた。

これ、Fx3とFx2でselectの幅、若干違うんですね。知らなかった。CSS関連のネタは見たけど部品の違いなんて気にもしてなかった・・・。上のできあがり見本の画像はサンプルだからアレなんですが、実際のデザインにはその部分にも背景画像が入ってて、セレクト周りの幅でうまくコントロールしないと背景からはみ出てアワワ・・・みたいな感じになっちゃってました。一瞬びっくりした。

>>一応確認用のサンプルはこちら

最初もしかしてフォーム周りのmarginだかpaddingが違う？とか思ったんですが、全然違ってた。単純に部品のサイズが違うらしい。

※クリックしたら原寸

並べるのが2つくらいならちょっとズレてるけどいっか・・・みたいな感じだったかも。だけど実際にはもう少し数が並ぶケースだったので勢いよく飛び出しておりました。テーマを自分好みにしてたので「まさかテーマの違いか！」とかも一瞬思ったんですが、関係なかった。単にデフォルトのままだと部品サイズが違うだけ。

CSSで整えて解決

どうしたら一緒になるのかという点については、これまた単純にCSSでselectに幅指定すれば解決。ただselectってoptionの内容が長いとホントは自動的に横長になるし、そういうselectの固定ってしない方がいいよね・・・フォーム周りはデフォが一番いいよね・・・と、このブログ作ったときに懲りたので、今回はselectに幅指定とかせず元々selectの周りに入れようと思ってたmarginのコントロールで回避してみた。

どっちみちフォーム周りはブラウザによって全然違うし、select横並びって結構個人的にはレアケースなので、今後こういう現象に遭遇するか分かんないけど一応書きとめておく。実はFx2も3もそんなに表示変わらないだろとか勝手に思ってて、Fx3でばかりプレビューしてFx2は最終で～みたいな甘いやり方してたんですよね。相方がまだFx2ユーザーで「ここ！はみ出てるじゃん！」ってツっこんでくれなかったら最終まで気づいてなかったのかも・・・すみませぬすみませぬ＞＜

2008年07月01日 17:03 | Red | パーマリンク