margen y 1px persistente diferencia de altura alrededor de los elementos de entrada

Question

Estoy teniendo un problema con los elementos de entrada:

A pesar de que en esa foto de su CSS es

margin: 0; 
padding: 0; 

Todavía tienen que un pequeño margen del que no me puedo deshacer. Tuve que usar un margen negativo de -4px para que el botón permanezca cerca del campo de texto.

Además, cuando hago más estilo, termino con un problema entre Firefox y Chrome: los botones de envío parecen no tener la misma altura. Establecer una altura que hace que el botón de enviar encaje junto con la barra de entrada en Chrome lo rompe en Firefox y viceversa. Parece que no hay una solución aparente.

1px difference between buttons http://gabrielecirulli.com/p/20110702-170721.png

En la imagen se puede ver que en el campo en Chrome botón y entrada (derecha) encajar perfectamente, en Firefox van a tener una diferencia de altura de 1 píxel.

¿Hay una solución a estos 2 problemas (el margen persistente y la diferencia de 1px)?

---

EDIT: he fijado el primer problema, que fue causada por el hecho de que los dos elementos se separaron por un salto de línea en el código HTML. El segundo problema persiste, sin embargo, como se puede ver aquí: , poniendo de relieve la forma de los dos elementos, se puede ver que en Firefox (izquierda) el botón es 2px más alto que en Chrome (derecha)

Answer 1

Pruebe este: demo fiddle.

HTML:

<span><input type="text" /><input type="submit" /></span> 

CSS:

span, input { 
    margin: 0; 
    padding: 0; 
} 
span { 
    display: inline-block; 
    border: 1px solid black; 
    height: 25px; 
    overflow: hidden; 
} 
input { 
    border: none; 
    height: 100%; 
} 
input[type="submit"] { 
    border-left: 1px solid black; 
} 

probado en Win7 en IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0. Solo IE7 falla, ya que muestra obstinadamente una entrada de envío tipo botón normal.

Answer 2

Me parece que su CSS está interfiriendo, en alguna parte, con el diseño de sus entradas.

Como puedes ver aquí http://jsfiddle.net/F3hfD/1/ lo que estás preguntando es factible sin ningún problema.

Answer 3

Para su segunda cuestión, ver How to reset default button style in Firefox 4 +

Answer 4

Para un problema similar en el que una imagen usada como el tipo de botón = "submit" y que no era exactamente la misma altura que la entrada adyacente a ella, simplemente añadido este al recipiente de las dos dichas entradas:

padding-bottom:1px; 

Answer 5

I tenían un glyphicon en un lapso de lado de entrada, que estaba insertando la parte superior: 1px. Así que configuré top: 0px en span y el problema se solucionó. Pero la respuesta real para el hilo es totalmente específica del problema y el usuario necesita comprender mejor los elementos y css para solucionarlo.