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

Question

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

入力が200インチ、高さが20ピクセルの場合は、 5（すべての方法）でのパディング、合計と幅と高さの合計は210pxと30pxですが、Firefoxでは200pxと20pxです。

どうすればこの問題を回避できますか？

Answer 1

がinputこのCSSを与える：

box-sizing: border-box; 

あなたはQuirksMode、the W3C spec、およびMDNにbox-sizingについての詳細を読むことができます。ここにはits browser supportがあります。ターゲットブラウザで必要な場合は、プレフィックス-moz-または-webkit-を使用してください。

---

は、この答えは、以前私がChromeウェブインスペクタのアップ/ダウンの矢印キーを使用して発見した値initialを、提案しました。しかし、initialは、ブラウザのデフォルト値であるプロパティの初期値を表すCSSキーワードです。どのプロパティにも適用可能です。 initialは、使用するボックスモデルを明示的に命名するよりも安全性が低くなります。 box-sizing: initialが指定され、ブラウザのデフォルト値box-sizingが変更された場合は、inputの埋め込みが再び破損する可能性があります。

Answer 2

display：blockをフォームに貼り付けてみましたか？ FFがインライン要素のように扱われているように思えるかもしれません。

Answer 3

blueprint-cssなどのCSSフレームワークを使用してください。青写真に添付されているサンプルページをご覧ください（forms.htmlというファイルがあります）。これにより、パディングの問題だけでなく、遭遇する可能性のある他の問題も解決するはずです。

Answer 4

これを試してみてください：

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

* { 
    margin: 0; 
    padding: 0; 
} 

Answer 5

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