フォームボタンがIEだとおかしくなる

例えば、PHP(文字コードutf8)でフォームを作ったとする

<input value=”送信” />

というようにボタンの部分を作ると、なぜかブラウザのIEで見ると文字が上にずれて、ボタンの幅も大きくなりすぎる。firefox,chrome,safariだと綺麗に表示される。

<input type=”submit” value=”送信” class=”b1″/>

として、クラスの中で幅と高さを決めると、ボタンの幅が大きくなりすぎる問題は解決。
文字の高さもクラスの中でpadding-topで数ピクセル空けてあげると一応は解決。ただしpaddingを使うと今度はIE以外でおかしくなる。

文字フォントを

font-family: “MS UI Gothic”;

にすると解決するという情報を見て、クラスで指定したら、高さはちゃんと表示された(幅はダメ)。
ただ、ボタンの部分だけフォントを変えるとデザインに違和感が出る場合がある。
結論としては、簡単に済ませるなら、ボタンの大きさをスタイルシートで設定し、フォントはMS UI Gothicにすると良さそう。

まあ、ちょっと面倒です・・・。


広告

コメントを残す