html - 如何完美匹配带有文本字段的按钮

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;