텍스트 필드에 버튼을 완벽하게 맞추는 방법

Question

텍스트 필드에 버튼을 넣으려고하므로 양보 할 때까지 다른 치수 (높이 버튼)를 시도했습니다. 문제는 크롬에서 멋지지만 파이어 폭스에서 예상대로 맞지 않는다는 것입니다. 어떻게 해결할 수 있습니까?

도움 주셔서 감사합니다.

크롬 :

http://imageshack.us/a/img401/5964/mlvq.png

파이어 폭스 :

http://imageshack.us/a/img707/2672/u1c.png

코드 :

#textfield 
    width: 120px; 
    border: 1px solid #aaa; 
    border-radius: 8px 0 0 8px; 
    padding-top: 5px; 
    font: 22px Arial, Helvetica; 
    padding-bottom: 5px; 
    padding-left: 5px; 
    box-shadow: 0px 0px 3px #E7E7E7, 0 10px 15px #E7E7E7 inset; 
    outline: none; 
} 


#button { 
    border-radius: 0 8px 8px 0; 
    border: 1px solid #aaa; 
    padding-top: 5px; 
    margin-left: -5px; 
    -moz-box-shadow:inset 0px 1px 0px 0px #caefab; 
    -webkit-box-shadow:inset 0px 1px 0px 0px #caefab; 
    box-shadow:inset 0px 1px 0px 0px #caefab; 
    background-color:#77d42a;  
    display:inline-block; 
    color:#306108; 
    font-family:arial; 
    font-size: 20px; 
    font-weight:bold; 
    padding:6px 24px; 
    text-decoration:none; 
    padding-top: 7px; 
    text-shadow:0px 1px 0px #aade7c; 
} 

Answer 1

둘 다 높이를 지정해야합니까?

height: XXpx;