html - 如何使按钮与文本字段完美匹配

Question

我正在尝试让一个按钮适合一个文本框，所以我一直在尝试不同的尺寸(高度的按钮)直到他们让步。问题是:在 Chrome 上看起来不错，但在 Firefox 上它们并不像我预期的那样适合。我该如何解决？

感谢您的帮助!

Chrome:

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;