Firefox/Safari altura configurar como [especificado altura - acolchado - frontera] para la entrada [tipo botón =]

Cuando utilizo el siguiente CSS:Firefox/Safari altura configurar como [especificado altura - acolchado - frontera] para la entrada [tipo botón =]

input[type=button] { 
    background-color: white; 
    border: 1px solid black; 
    font-size: 15px; 
    height: 20px; 
    padding: 7px; 
}

con este código HTML:

<input type="button" value="Foo" />

I esperar a ver esto, por lo que la altura total se convierte en 36px:

1px border 
7px padding 
20px content (with 15px text) 
7px padding 
1px border

Pero en lugar tanto en Firefox 3.6 y Safari 4 sh ow esto: (no hemos probado en otros navegadores)

Screenshot http://labs.spiqr.nl/upload/files/1223ef9cbae3ab6e43bd1f9215ebedb157ac7b22.png

1px border 
7px padding 
4px content (with 15px text) => height - 2 * border - 2 * padding 
7px padding 
1px border

¿Alguien tiene alguna idea de por qué sucede esto?

(Incluso si es el comportamiento esperado, ¿cuál es la lógica detrás de esto?)

Fuente

2010-02-14 Douwe Maan

imagen rota (uso imgur!) –

Los elementos de formulario han tenido tradicionalmente un width/height que incluye su acolchado/frontera, porque se implementaron originalmente por navegadores como widgets de interfaz de usuario del sistema operativo nativo, donde CSS no tenía ninguna influencia sobre las decoraciones.

Para reproducir este comportamiento, Firefox y otros hacen que algunos campos de formulario (seleccionar, botón/de entrada del tipo de botones) con el estilo CSS3 box-sizing establecido en border-box, por lo que la propiedad width refleja toda la anchura del área rendido incluyendo la frontera y relleno.

Puede desactivar este comportamiento con: (. O, lo que es más común para los diseños de forma líquida en las que desee utilizar '100%' de anchura, se puede establecer que los demás border-box)

select, button { 
    box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box; 
}

Las versiones con prefijo de navegador deben estar presentes para detectar los navegadores que implementaron esto antes de que el proceso de estandarización haya llegado hasta el momento. Sin embargo, esto será ineficaz en IE6-7.

Fuente

2010-02-14 11:22:35 bobince

¡Muchas gracias! Funciona como un amuleto –

¡genial! no lo sabía, gracias. – Sinan

Yo votaría esto más de una vez si fuera posible. –

Algunas cosas que usted puede intentar:

Establecer la doctype del documento (<!DOCTYPE html>)
Establecer la entrada para ser display:block o display: inline-block
Utilice un reset stylesheet.

Fuente

2010-02-14 11:18:23 Marius

bastante bueno en esas opciones, no funcionó. –

Cambiar el DOCTYPE de HTML4 Transitional a HTML5 funcionó para mí. – TataBlack

Tiene sentido porque la altura del elemento es, naturalmente, más de lo que se establece. a los elementos de entrada se les asigna una altura que, en este caso, debería ser suficiente para contener el texto de su elemento, pero lo establece en una cantidad menor. Para mostrar esto, elimine su configuración de altura.

Fuente

2010-02-14 11:25:07 Rob

Otros elementos funcionan como dije: La altura total es 'border-top + padding-top + height + padding-bottom + border-bottom'. –

Lo tengo trabajando eliminando el relleno del botón de entrada y estableciendo una altura alrededor de 20. luego ajuste la altura, el relleno del elemento de anclaje. También establezco la altura de línea, el tamaño de fuente y la familia de fuentes.

trabajaron en FF, IE, Safari y Chrome: D enlace

Fuente

2010-09-30 11:07:44 Rahatur

Firefox/Safari altura configurar como [especificado altura - acolchado - frontera] para la entrada [tipo botón =]

Respuesta

Cuestiones relacionadas