如何完美適合一個帶有文本框的按鈕

Question

我試圖用一個文本框來適應按鈕，所以我一直嘗試不同的尺寸（高度的按鈕），直到它們被允許。問題是：在Chrome上看起來不錯，但是在Firefox中它們並不符合我的預期。我該如何解決它？

謝謝你的幫助！

鉻：

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;