17

Web サイトのフォームのパディングに問題があります。高さ/幅をフォーム要素に設定してから、パディングを追加したとします。私が試したすべてのブラウザーでは、Firefox を除いて、パディングが高さ/幅に追加されます。

幅200、高さ20pxの入力があるとします。パディングが 5 (全方向) の場合、幅と高さの合計と合計は 210px と 30px になりますが、Firefox では 200px と 20px です。

これを回避するにはどうすればよいですか？

4

5 に答える 5

28

次のinputCSS を指定します。

box-sizing: border-box;

詳細についてbox-sizingは、QuirksMode、W3C 仕様、およびMDNを参照してください。これがブラウザのサポートです。プレフィックスを使用する-moz-か-webkit-、ターゲット ブラウザーで必要な場合は使用します。

この回答はinitial、Chrome Web Inspector で上下の矢印キーを使用して見つけた value を以前に提案していました。initialしかし、これは、プロパティの初期値 (ブラウザーのデフォルト値) を表す、あらゆるプロパティに適用可能な CSS キーワードであることが判明しました。initial使用するボックス モデルを明示的に指定するよりも安全性が低くなります。box-sizing: initialが指定されていて、ブラウザのデフォルト値がbox-sizing変更された場合、のinputパディングが再び壊れる可能性がありました。

于 2011-07-29T16:25:19.023 に答える
3

blueprint-cssなどのCSSフレームワークを使用してみてください。ブループリントに付属しているサンプルページを見てください（というファイルがありますforms.html）。これにより、パディングの問題だけでなく、発生する可能性のある他の多くの問題も解決するはずです。

于 2009-08-30T18:42:50.473 に答える
0

フォームにdisplay：blockを配置してみましたか？FFがインライン要素のように扱っている可能性があるようです。

于 2009-08-30T18:37:21.560 に答える
0

http://necolas.github.com/normalize.css/

/*
 * 1. Addresses box sizing set to content-box in IE 8/9.
 * 2. Removes excess padding in IE 8/9.
 * 3. Removes excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
}

/*
 * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}
于 2012-10-16T05:43:43.093 に答える
-2

これを試して：

/* Set all margins and paddings to 0 on all browsers */

* {
    margin: 0;
    padding: 0;
}
于 2011-02-03T15:43:04.623 に答える