UTF-8 での FORM ボタンの文字が浮く(IE)

UTF-8でかかれたソースを、IEで見ていて気づいた。
FORMのSUBMITボタンの文字が若干浮いている。(上側、画像の一番左。)また、アルファベットを使用するとうまくセンタリングされるようだ。(グーグルとgoogleの違い)

SJISにするとちょうどセンタリングされる。(下側)

UTF-8
utf-8
SJIS
SJIS


そこで、スタイル宣言を用いてpaddingを入れる。(下記ソースも参照)

padding-top:2px;

これでぴったり真ん中に文字が表示された。(2、3、5番目。3は1px)



ついでに text のあれこれも。paddingとline-heightを使うとめちゃめちゃになります。
FORM_IE



以下はfirefoxでの表示です。line-heightがいい感じに使えてます。
FORM_firefox


文字がでかいフォームは気にしないで下さい。サイズどこまであげられるかと思いまして・・・。いくらでもいけるようです。

ソース
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<title>TEST</title>
<style>
input{
margin:10px;
}
.i2{
padding:1px;
}
.i3{
padding-top:2px;
}
.i5{
padding-top:2px;
}


.i7{
padding:1px;
}
.i8{
line-height:5%;
}
.i9{
padding:10px;
}
.i10
background-color:#dddddd; font-size:1000px;
</style>
</head>
<body>
<div>
<input type="submit" value="送信" />
<input type="submit" value="送信" class="i2" />
<input type="submit" value="送信" class="i3" />
<input type="submit" value="グーグル検索" />
<input type="submit" value="google検索" />
<input type="submit" value="送信" class="i5" />
</div>

<div>
<input type="text" value="送信" />
<input type="text" value="送信" class="i7" />
<input type="text" value="送信" size="20" class="i8" />
<input type="text" value="送信" class="i9" />
<input type="text" value="送信" class="i10" />
</div>


</body>
</html>

タグ:CSS HTML utf-8 input

関連の話題を探す@人気ブログランキング

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

この記事へのトラックバックURL
http://blog.seesaa.jp/tb/57849299

この記事へのトラックバック
Powered by Seesaa