CSS - FF와 Safari에서 다르게 정렬 된 입력 (텍스트와 버튼)

Question

버튼과 텍스트 입력을 한 레벨에 정렬하려고했지만 Firefox (올바르게 정렬 됨)와 Safari (올바르게 정렬되지 않음)에서 결과가 서로 다릅니다.

JSFiddle을 만들었고 두 브라우저에서 서로 다른 동작을 볼 수 있지만 지금은 왜 이런 일이 발생하는지 말할 수 없습니다.

누군가 대답을 알고 있습니까?

감사합니다.

JSFiddle는 : - http://jsfiddle.net/LPgJr/3/

것은 나중에 당신의 수레를 취소하는 것을 잊지 마세요 http://jsfiddle.net/LPgJr/2/

Answer 1

당신은 그들에게 모두 왼쪽을 떠합니다.

Answer 2

WebKit과 Gecko는 텍스트 필드의 높이를 다르게 렌더링합니다. 바이올린에서 텍스트 필드의 패딩을 연속적으로 변경해보십시오. 0px, 1px, 2px, 3px, 10px, 25px, 40px, 80px 등을 사용해보십시오. 텍스트 필드의 패딩이 버튼의 수직 위치에 영향을주는 것을 볼 수 있습니다. 텍스트 필드의 패딩이 클수록 버튼이 내려갑니다.

왜 이런가요? 브라우저는 텍스트 영역의 텍스트를 버튼의 텍스트와 나란히 배치하기 때문입니다. 여기

예 : http://jsfiddle.net/rtoal/LPgJr/6/

은 브라우저 때문에 그들이 텍스트 필드를 렌더링하는 방식의 다른 모습을주고있다. SpaceBeers에서 제안한대로 명시 적으로 높이를 설정하십시오.