1225817169 IE6で、テキストボックスの上下に1pxずつのスペースができてしまいます。


marginやpadding等考えられるスタイルの調整は試してみたつもりですが、どうしてもこのスペースが消えなくて困っています。

以下がテストケース用のHTMLソースです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>none</title>
<style type="text/css">
.textbox {
height: 32px;
width: 200px;
font-size: 28px;
}
</style>
</head>

<body>

<input type="text" class="textbox"/>
<br/>
<input type="text" class="textbox"/>
<br/>
<input type="text" class="textbox"/>

</body>

</html>

[ 条件 ]
DOCTYPEの変更はしない。

[ テスト環境 ]
FX3, Sf3, IE7 - Win Vista(英語) テキスト設定 120dpi
IE6 - Win Vista(英語) 上の バーチャルPC Win2000(英語)

回答の条件
  • 1人2回まで
  • 登録:2008/11/05 01:46:12
  • 終了:2008/11/05 04:58:48

回答(1件)

id:haruo-31 No.1

haruo-31回答回数80ベストアンサー獲得回数102008/11/05 01:56:22

ポイント60pt

border-style属性にsolidを設定すると隙間が無くなります。

ちなみに、デフォルトでは立体(たしかgroove)になるので、Windowsの場合一番外側に白#ffffffの線が1px分描画されてしまう為だと思います。

id:maverick100s

迅速なご回答ありがとうございます。

しかし、残念ながら、CSSを以下に変更しても上下1ピクセルは残っていました。

.textbox {

height: 32px;

width: 200px;

font-size: 28px;

border-style: solid;

}

2008/11/05 02:02:53
  • id:maverick100s
    自己解決しました。

    .textbox {
    margin: 0px;
    padding: 0px;
    height: 32px;
    width: 200px;
    _margin-top: -1px;
    _margin-bottom: -1px;
    }

    で、各ブラウザ全く同じ様に表示できるようになりました。
  • id:yuyaamano
    ハック使いたくない場合の対処策として、
    floatしてもマージン消えます。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません