web-dev-qa-db-ja.com

FirefoxとOpera / Chrome / IEでのフォームパディングの違い

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

幅200、高さ20pxの入力がある場合。 5（すべての方法）でパディングすると、幅と高さの合計と合計は210pxと30pxになりますが、Firefoxでは200pxと20pxになります。

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

cssfirefoxpadding
17
guzh

inputにこのCSSを与えます。

box-sizing: border-box;

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

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

28
Rory O'Kane

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

3
Christoph Schiessl

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

0
edeverett

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;
}
0
vulgarbulgar