Diferencias de relleno de forma en Firefox y Opera/Chrome/IE

Question

Tengo un problema con el relleno en mi formulario en mi sitio web. Si he configurado un alto/ancho para un elemento de formulario y luego le agrego un relleno. En todos los navegadores que he probado, excepto Firefox, el relleno se agrega al alto/ancho.

Si tengo una entrada con 200 de ancho y 20px de alto. y relleno en 5 (todas las formas), la suma y el ancho y la altura totales serían 210px y 30px, pero en Firefox es 200px y 20px.

¿Cómo puedo trabajar en esto?

Answer 1

Dale la input este CSS:

box-sizing: border-box; 

Puede leer más sobre box-sizing en QuirksMode, the W3C spec y MDN. Aquí está its browser support. Utilice los prefijos -moz- o -webkit- si así lo requieren sus navegadores de destino.

---

Esta respuesta había sugerido previamente el valor initial, que me había encontrado con las teclas de flecha arriba/abajo en el inspector de Chrome Web. Pero resulta que initial es una palabra clave CSS, aplicable a cualquier propiedad, que representa el valor inicial de la propiedad: el valor predeterminado del navegador. initial es menos seguro que nombrar explícitamente qué modelo de caja usar. Si se especificaron box-sizing: initial y se modificó el valor predeterminado de un navegador para box-sizing, el relleno de input podría romperse de nuevo.

Answer 2

¿Ha intentado poner display: block en el formulario? Parece que FF podría tratarlo como si fuera un elemento en línea.

Answer 3

Intente utilizar un marco CSS como blueprint-css. Eche un vistazo a las páginas de ejemplo que se envían con blueprint (hay un archivo llamado forms.html). Esto debería resolver su problema de relleno, así como un montón de otros problemas que pueda enfrentar.

Answer 4

Prueba esto:

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