填寫Firefox和Opera / Chrome / IE中的填充差異

Question

我的網站上的填寫表格有問題。 如果我已將高度/寬度設置為表單元素，然后向其添加填充。 在我嘗試過的所有瀏覽器中，除了Firefox之外，填充都添加到高度/寬度。

如果我的輸入寬度為200，高度為20px。 並且在5（所有方向）填充，總和和總寬度和高度將是210px和30px，但在Firefox中它是200px和20px。

我該如何解決這個問題呢？

Answer 1

給這個CSS input ：

box-sizing: border-box;

您可以在QuirksMode ， W3C規范和MDN上閱讀有關box-sizing更多信息。 這是它的瀏覽器支持 。 如果目標瀏覽器需要，請使用前綴-moz-或-webkit- 。

---

這個答案以前曾建議使用Chrome Web Inspector中的向上/向下箭頭鍵找到的值initial 。 但事實證明， initial是一個CSS關鍵字，適用於任何屬性，表示屬性的初始值 - 瀏覽器的默認值。 initial比明確命名要使用的框模型更安全。 如果指定了box-sizing: initial並且更改了box-sizing的瀏覽器默認值，則input的填充可能會再次中斷。

Answer 2

嘗試使用CSS框架，例如blueprint-css 。 看一下藍圖附帶的示例頁面（有一個名為forms.html的文件）。 這應該可以解決您的填充問題以及您可能遇到的一些其他問題。

Answer 3

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

Answer 4

你試過在表格上放置display：block嗎？ 聽起來像FF可能會像對待內聯元素一樣對待它。

Answer 5

試試這個：

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

* {
    margin: 0;
    padding: 0;
}