ancho del 100% en el tipo de entrada enviar frente al texto del tipo de entrada

Question

Tengo un formulario de inicio de sesión diseñado para que los cuadros de texto y el botón enviar se extiendan al 100% del tamaño del contenedor. Esto es para una distribución móvil fluida, pero mi ejemplo de jsbin a continuación tiene un tamaño de contenedor fijo para demostración.

http://jsbin.com/ozutoq/9

En IE7, IE8, FF 4, Safari - todas rinden el botón un poco más corto que los de texto presente. La herramienta de diseño de Firebug muestra los cuadros de texto a 500px de ancho, pero el botón de enviar a 498px de ancho. En mi ejemplo real, el botón de enviar es 6px más delgado. ¿Cómo puedo solucionar esto, así que ocupa todo el ancho?

actualización

lo hice otra prueba mediante el establecimiento de un ancho fijo en las entradas. Parece que el botón Enviar no sigue el modelo de caja. Usé un ancho de 100 píxeles, y mostró 98 píxeles + 2 píxeles para los bordes, mientras que los cuadros de texto mostraron 100 píxeles de ancho + 2 píxeles para las fronteras.

Entonces, supongo que la pregunta es ¿cómo puedo manejar esto en un diseño fluido? -1px relleno derecho e izquierdo en los botones no parece funcionar, ¡y el diseño requiere un borde de 1px en el botón! ¿Tendré que recurrir a js?

Answer 1

Por alguna razón Mozilla establece las entradas de texto tipo de -moz-box-sizing:content-box; pero el botón de enviar se establece en -moz-box-sizing:border-box;

Ajuste de la siguiente le dará la prestación prevista en FF.

.login-tb { 
    border:1px solid red; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    box-sizing:border-box; 
    margin: 0; 
    padding: 0; 
    width:100%; 
} 

Actualización: el apoyo Agregado Safari y IE8 +

Answer 2

De hecho, es bastante raro. Creo que el borde de 1px se agrega al exterior de las entradas de texto, por lo que tiene 500 píxeles de ancho.

Si bien en el botón Enviar se calcula el botón en los lados, pero muestra en el interior, por lo que obtener 500px - 1px - 1px = 498px de ancho ...

Una posible solución que se puede hacer es simplemente crear el siguiente CSS:

.login-tb { 
    border: 1px solid red; 
    margin: 0; 
    padding: 0; 
    width: 500px; 
} 

#login-tb { 
    border: 1px solid red; 
    margin: 0; 
    padding: 0; 
    width: 502px; 
} 

Eso soluciona el problema y todavía muestra su botón de enviar como 500px de ancho en Firebug. Y como su formulario se establece en 500 píxeles de ancho de todos modos y esto no cambia, no es de mucha utilidad implementar un ancho establecido en un porcentaje.

Answer 3

Creo que es la forma en que el navegador calcula las dimensiones de entrada [type = submit]. Traté de aplicar algunos reinicios pero tampoco parecían funcionar. Estoy en una Macbook Air con Chrome y en su ejemplo de JSBin, la vista previa en tiempo real se veía bien, pero el "Render" validó su problema.

Intenté jsfiddle.net y mostró el mismo problema. Aquí hay una solución si esto volará para su aplicación.Basta con quitar el borde y el fondo del botón de enviar y estilo del div contenedor en su lugar, a continuación, poner un detector de clics en el div para enviar el formulario:

CSS:

form { 
    width: 500px; 
    padding:0; 
    margin:0; 
} 
form div, form div input { 
    height:20px; 
    margin-bottom:4px; 
} 
input[type=text] { 
    width: 100%; 
    border: 1px solid red; 
    padding: 0; 
    margin: 0; 
} 
#submit input{ 
    background:transparent; 
    margin:auto; 
    border:none; 
} 
#submit{ 
    text-align:center; 
    background-color:#CCC; 
    width: 100%; 
    border: 1px solid red; 
    padding: 0; 
    margin: 0; 
    cursor:pointer; 
} 

JQUERY:

$('#submit').click(function(){ 
    $('#login').submit(); 
}); 

$('#login').submit(function(){ 
    alert('form submitted'); 
    return false; 
}); 

http://jsfiddle.net/pZcx4/

ALTERNATIVOS JS orígenes:

function submit_form() 
{ 
    alert('form submitted'); 
    return false; 

    // when you are ready, do this: document.forms['login'].submit(); 
} 


document.getElementById('submit').addEventListener('click',submit_form,false); 

http://jsfiddle.net/pZcx4/3/

Answer 4

No estoy seguro de que esto funcionará para su entorno. Cuando jugaba con el jsbin, el ajuste de la width trabajaron ...

.login-tb { width: 99.75%; border: 1px solid red; padding: 0; margin: 0; }

probado sólo en Chrome.