[CSS] ボタンの高さと Firefox での不揃い問題について
YUI reset した後の CSS でいつもネックだったフォーム要素のデザインについて少し調べてみました。ここで言うデザインとは、グラフィックを使ったリッチなやつではなく、標準の要素の文字サイズのばらつきや、ボタンの高さについてです。文字サイズについては CSS で単に font-size 指定すれば揃えられます。
ボタンの高さ指定はなぜか無視されます。結論から言うと、ボタンが inline 要素として定義されているためのようです(インライン要素は高さ指定が無視されます)。これは、下記のように display: inline-block として定義しなおして解決できました。
input[type="button"],
input[type="submit"],
input[type="clear"],
input[type="file"] {
display: inline-block;
height: 2.5em;
padding: 0.2em;
}
ただし、file タイプだけは残念な表示(ブラウザによっても異なる)になってしまいました。また、Firefox のみ半角英数字だけのボタンと、全角文字入りのボタンで1ドット違っています。これは半角英数字を日本語フォントで表示させてみても解決できず、課題として残ってしまいました。しかし、遠目で見れば、その違いは分からず違和感がある程度です。今のところ、ボタンの中に全角文字を入れる、くらいしか解決方法は無いようです。
0 件のコメント