Persistent margines i różnica wysokości 1px wokół elementów wejściowych

Question

Mam problem z elementów wejściowych:

Choć w tym obrazie ich css jest

margin: 0; 
padding: 0; 

Mają jeszcze, że niewielki margines, którego nie mogę się pozbyć. Musiałem użyć ujemnego marginesu -4px, aby przycisk pozostał blisko pola tekstowego.

Ponadto, gdy wykonuję dalszą stylizację, pojawia się problem między przeglądarką Firefox a Chrome: przyciski przesyłania wydają się nie mieć tej samej wysokości. Ustawienie wysokości, która powoduje, że przycisk "wyślij" pasuje do paska wprowadzania w przeglądarce Chrome, powoduje jego przerwanie w Firefoksie i na odwrót. Wydaje się, że nie ma widocznego rozwiązania.

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

W obrazie można zobaczyć, że gdy w Chrome (po prawej) i przycisk polu wejściowym pasują idealnie w Firefoksie, że będziemy mieć różnicę wysokości 1px.

Czy istnieje rozwiązanie tych 2 problemów (stały margines i różnica 1px)?

---

Edycja: Naprawiłem pierwszy problem, to zostało spowodowane tym, że te dwa elementy zostały oddzielone nowej linii w kodzie html. Drugi problem nie ustąpi, chociaż, jak widać tutaj: podkreślając kształt dwóch elementów, można zobaczyć, że w Firefoksie (z lewej) przycisk jest 2px wyższy niż w Chrome (po prawej)

Answer 1

Wypróbuj ten: 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; 
} 

Testowane na Win7 w IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0. Jedynie IE7 nie udaje się, ponieważ uparcie pokazuje normalne wejście typu "jak".

Answer 2

Wydaje mi się, że twój CSS zakłóca gdzieś swój układ wejść.

Jak widać tutaj http://jsfiddle.net/F3hfD/1/ to, o co prosisz, jest możliwe bez problemu.

Answer 3

Na swojej drugiej kwestii, zobacz How to reset default button style in Firefox 4 +

Answer 4

Do podobnego problemu gdzie obraz używany jako przycisk type = „submit” i to nie była dokładnie taka sama jak wysokość wejścia przylega do niej, po prostu dodaje to do pojemnika z dwóch wspomnianych wejść:

padding-bottom:1px; 

Answer 5

miałem glyphicon w przedziale przy wejściu, który wkładania góra: 1 piksel. Więc ustawiłem top: 0px na zakres i problem został naprawiony. Ale rzeczywista odpowiedź na wątek jest całkowicie problematyczna, a użytkownik musi lepiej zrozumieć elementy i css, aby to naprawić.