modelo de caja inconsistente entre <input type = "submit" /> y <type = "text" input />

Question

I dado cuenta de que <input type="submit"/> tiene un modelo border-box caja, mientras que <input type="text"/> tiene un modelo de content-box caja. Este comportamiento está presente en IE8 y FF. Desafortunadamente, esto me impide aplicar este estilo para entradas agradables de igual tamaño:

input, textarea 
{ 
    border: 5px solid #808080; 
    padding:0px; 
    background-color:#C0C0C0; 
    width:20em; 
} 

¿Este comportamiento correcto es de IE y FF? ¿Y hay un modo de navegación cruzada alrededor de este problema?

Answer 1

¿Es este comportamiento correcto por IE y FF?

En realidad, no está establecido en el estándar cómo las decoraciones del campo de formulario están controladas por CSS. Originalmente se implementaron como widgets del sistema operativo, en cuyo caso el tamaño de la caja del borde tendría sentido. Los navegadores posteriores migraron para renderizar los widgets usando bordes CSS/relleno/etc., en cuyo caso el tamaño del cuadro de contenido tendría sentido. Algunos navegadores (IE) representan campos de formulario como una combinación de ambos, lo que significa que puede terminar con cuadros de selección que no se alinean con campos de texto.

¿Y existe una forma de navegación cruzada alrededor de este problema?

Acerca de lo mejor que puede hacer es decirle al navegador qué dimensionamiento que desee utilizando manualmente CSS3:

box-sizing: border-box; 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 

(no funcionará en IE6/7, IE8 o cuando se encuentra en modo de compatibilidad o peculiaridades.)

Answer 2

usted tiene dos opciones para resolver este problema 1) si se escribe el código CSS para la entrada, que se aplica para cada entrada element.Instead de utilizar esto para Evert uno de ellos, acaba de hacer para tipos específicos

 
input[type="submit"],input[type="text"] 
{ 
    border: 5px solid #808080; 
    padding:0px; 
    background-color:#C0C0C0; 
    width:20em; 
} 

2) Siempre utilizo las declaraciones de clase después de restablecer nombres de etiquetas conocidos.

 
.MySubmit 
{ 
    border: 5px solid #808080; 
    padding:0px; 
    background-color:#C0C0C0; 
    width:20em; 
} 

y utilizarlo como

<input type="submit" class="MySubmit" /> 

espero que esto ayude.

Answer 3

No es un css única solución para ello

div.search input[type="text"] { width: 110px; margin: 0; background-position: 0px -7px; text-indent:0; padding:0 15px 0 15px; } 
/*ie9*/ div.search input[type="text"] { border-left: 25px solid transparent; } 
/*ie8*/ div.search input[type="text"] { border-left: 25px solid transparent; background-position-x: -16px; padding-left: 0px; line-height: 2.5em;} 

Gracias Muhammad Atif Chughtai

Answer 4

He usado esta solución CSS para obtener alturas idénticas de botones y texto; funciona en IE, FF y Chrome. Básicamente, la idea es forzar la altura de los elementos de entrada a una altura de caja mayor que la predeterminada. Haga esto para texto y botón:

• Establezca los márgenes y el relleno en 0. Esto proporciona la caja "natural" más pequeña posible.
• Establecer vertical-alinear con el centro. Esto compensa el relleno = 0 para obtener espacios en blanco encima/debajo del texto.
• Use alto/ancho para controlar las dimensiones del texto y el botón. La altura del texto debe ser varios píxeles mayor que la altura de la fuente (para anular las dimensiones predeterminadas del cuadro).La altura del botón debe ser 2 píxeles mayor que el texto (debido a las diferencias entre los modelos de texto y de cuadro de botones).

Ejemplo:

input { margin:0; padding:0; border:solid 1px #888; vertical-align:middle; height:30px; } 
input[type="submit"] { height:32px; }