人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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に詳しい方、教えてください。

●質問者: harg
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:CSS firefox HTML IE padding
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● ardarim
●20ポイント

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


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

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

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


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

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

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

◎質問者からの返答

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

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

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


2 ● miyatyu
●50ポイント ベストアンサー

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とかを設定していると全体のレイアウトが崩れてしまうかもしれません。

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

◎質問者からの返答

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

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

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


3 ● RedSpinel
●10ポイント

input.text {

padding: 5px;

width: 300px;

height: 25px;

}

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ