こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

HTMLで入力フォームがOS、ブラウザによってサイズが違います。

HTMLで入力フォームがOS、ブラウザによってサイズが違います。
どのOS、ブラウザでも同じサイズで表示したいのですが、上手くいきません。

OS:Windows7
ブラウザ:IE8、Sleipnir、Firefox、Chrome、Opera、Safari
状況:ALL OK

OS:WindowsXP
ブラウザ:IE8、Sleipnir、Firefox、Chrome
状況:Sleipnirのみフォームの縦のサイズが他と比べて大きいです
詳しく:それぞれのフォームの周りの余白がSleipnirだけ微妙に広いです
     画像を添付しました

[HTML] 抜粋・省略しました

<form action="#" method="post" class="contact">
<table width="405" id="table1">
<tr><th width="75">&nbsp;会社名<span style="color : #cc0000; font-size:10px;">(*必須)</span></th>
<td width="318" style="padding: 6px 3px;"><input class="text2" type="text" name="name"></td></tr>
<tr>
****省略*****
<th>&nbsp;住所</th>
<td><input class="text4" type="text" name="zyusyo">(都道府県)
<input class="text5" type="text" name="zyusyo">(市区町村)
<input class="text5" type="text" name="zyusyo">(町名、番地)
<input class="text6" type="text" name="zyusyo">(アパート・マンション名)</td>
</tr>
****省略*****
</table>
</form>

[CSS] 抜粋・省略しました

.text2 {
width: 180px;
background-color: #99cccc;
padding: 0px;
font-size: 12px;
height: 15px;
    border-width: 1px;
}

.text4 {
width: 100px;
padding: 0px;
background-color: #99cccc;
font-size: 12px;
height: 15px;
margin: 6px 0 3px;
border-width: 1px;
}
.text5 {
padding: 0px;
height: 15px;
width: 180px;
background-color: #99cccc;
margin: 3px 0;
border-width: 1px;
}
.text6 {
padding: 0px;
height: 15px;
width: 180px;
    margin: 3px 0 6px;
background-color: #99cccc;
border-width: 1px;
}
.contact #table1 th {
background-color: #ccffff;
font-weight: normal;
text-align: left;
vertical-align: top;
margin: 0px;
padding: 5px 0 0;
line-height: 12px;
}

.contact #table1 td {
background-color: #ccffff;
vertical-align: middle;
font-size: 10px;
margin: 0px;
padding: 3px 0 0;
}

投稿日時 - 2010-09-19 22:06:20

QNo.6193867

すぐに回答ほしいです

質問者が選んだベストアンサー

ざっと見なので見逃してたら済みません。

<th>&nbsp;会社名</th>

の部分のフォントサイズは指定されていますか?
また、Sleipnirで指定されたフォントサイズが適用されるようになっていますか?
(thで指定されたline-height:12px以上のフォントで表示されていて、padding:5px 0 0が適用されて、
そのthの高さがtdにも影響していないか、という推測。)

上記の推測の通りですと、フォントサイズ12px以上で表示する設定にしてあるブラウザでは、(IEやFirefoxなども含め)
tdの高さがかなり大きくなると思います。

ズームではなく、文字サイズだけを拡大表示してみるとわかると思います。
(IEでは表示メニュー -> 文字のサイズ -> 最大を選択)

投稿日時 - 2010-09-21 03:41:46

ANo.1

このQ&Aは役に立ちましたか?

5人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問