CSSで、input要素にpaddingを設定したいのですが、IEで思い通りに行きません。


やりたいことは、input要素(type="text"または"password")のテキストを入力するフィールドに余白をつくる、ということです。
http://www.crazyegg.com/account/login
このサイトのEmailやPasswordの入力フィールドのような感じです。フィールドのサイズがデフォルトより大きくなり、入力した文字の周りにある程度余白がある状態です。

Firefoxでは、
>> Style
input.text {
padding: 5px;
}
>> HTML
<input type="text" class="text" ... />

とすれば思い通りの結果が得られました。
しかしIEで上記のようにすると、フィールドのサイズが変わらずに、文字の左と上のみに余白ができてしまいます。つまり、下と右の余白が狭くなってしまいます。試しにpaddingの値を大きくたら、文字の左と上の余白が大きくなり、文字の下の部分がフィールドに収まりきらずに隠れてしまいました。
上記のサイト(http://www.crazyegg.com/account/login)では、IEでも入力フィールドに余白がある状態で表示されるので、IEでも入力フィールドに余白を設定することは可能だと思います。しかし、色々と試しても自分では解決できませんでした。
CSSに詳しい方、教えてください。

回答の条件
  • 1人2回まで
  • 登録:2006/09/15 00:42:40
  • 終了:2006/09/15 09:38:21

ベストアンサー

id:miyatyu No.2

miyatyu回答回数31ベストアンサー獲得回数22006/09/15 02:19:31

ポイント50pt

HTML/CSSを標準モードで開発していますか?

互換モードですと、ご質問のようにpaddingを設定しても上下の余白が広がりませんでしたが、標準モードならば上下の余白がしっかり広がりました。参照先のページも標準モードで開発されていました。

標準モードと互換モードの二種類があり、標準モードはよりWeb標準に添った形でCSSを解釈してくれます。

http://www.mars.dti.ne.jp/~fuming/advanced/dtd.htm

てっとりばやくやるためには、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

をHTMLファイルの冒頭に書き込んでください

ただ、互換モード前提でいろいろwidthとかを設定していると全体のレイアウトが崩れてしまうかもしれません。

互換モードでどうすればいいかは、わかりません。すみません。

id:harg

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

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

で標準モードにしたら、見事にうまくいきました。ありがとうございます。

2006/09/15 09:36:25

その他の回答(2件)

id:ardarim No.1

ardarim回答回数896ベストアンサー獲得回数1442006/09/15 05:24:56

ポイント20pt

IEのバグによるものではないでしょうか。


こちら(CSSレイアウトの定石 WinIE6バグ回避法:てんぽ)の

widthと同時に左右borderや左右paddingを指定しない。heightと同時に上下borderや上下paddingを指定しない。 
ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう 

が該当しないでしょうか?


下記のような指定で回避できると思います。

input.text {
    height: 2em;
    line-height: 1.5em;
    padding-left: 0.5em;
}

※ここでは単純にするためem単位で指定していますが、px単位でも指定は可能です。

id:harg

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

line-heightを使った方法だと、Firefoxでの表示がうまくいきませんでした。paddingと組み合わせても試してみましたが、IEとFirefoxではフィールドの高さが異なってきてしまうのでだめでした。

単一の記述でどうしてもだめなときは、IEのみに適応させる裏技でline-heightの方法を使わせていただきますが、できればそういうバッドノウハウは使いたくないところですね、、、

2006/09/15 09:26:54
id:miyatyu No.2

miyatyu回答回数31ベストアンサー獲得回数22006/09/15 02:19:31ここでベストアンサー

ポイント50pt

HTML/CSSを標準モードで開発していますか?

互換モードですと、ご質問のようにpaddingを設定しても上下の余白が広がりませんでしたが、標準モードならば上下の余白がしっかり広がりました。参照先のページも標準モードで開発されていました。

標準モードと互換モードの二種類があり、標準モードはよりWeb標準に添った形でCSSを解釈してくれます。

http://www.mars.dti.ne.jp/~fuming/advanced/dtd.htm

てっとりばやくやるためには、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

をHTMLファイルの冒頭に書き込んでください

ただ、互換モード前提でいろいろwidthとかを設定していると全体のレイアウトが崩れてしまうかもしれません。

互換モードでどうすればいいかは、わかりません。すみません。

id:harg

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

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

で標準モードにしたら、見事にうまくいきました。ありがとうございます。

2006/09/15 09:36:25
id:RedSpinel No.3

RedSpinel回答回数32ベストアンサー獲得回数12006/09/15 03:21:08

ポイント10pt

input.text {

padding: 5px;

width: 300px;

height: 25px;

}

のように、widthとheightを指定する方法では如何でしょうか。

コメントはまだありません

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

トラックバック

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

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

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