Problems with setting input text and input submit

问题:

I want to put a text input on the same line and height as a submit button. See the JSFiddle. In Chrome this works flawless, but in Firefox the submit button is lower than the text input. How do I fix this. HTML

<div id="whois-lookup">
    <form id="whois-form">
        <input type="text" placeholder="search" id="name-check" />
        <input type="submit" name="query" />
    </form>
</div>

And the css

#whois-lookup input[type=text]
    {
        margin: 0;
        border: 1px solid #aaa;
        border-right: 0px;
        font-size: 1.0em;
        line-height: 25px;
        height: 25px;
        padding: 0 10px;
        width: 188px;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
        position: relative;
        top: -2px;
    }

    #whois-lookup input[type=text]:focus
    {
        outline: none;
    }

    #whois-lookup input[type=submit]
    {
        margin-left: -4px;
        border: 1px solid #aaa;
        border-left: 0px;
        font-size: 1.0em;
        line-height: 27px;
        height: 27px;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        color: #666;
        cursor: pointer;
        background-color: #fff;
    }

回答1:

As said earlier (see CBroe's comment), you just need the following CSS, see embedded comments:

#whois-lookup
{
    top: 0;   /** Don't need top/right, no effect for static positioning **/
    right: 0;
}


#whois-lookup input[type=text]
{
    margin: 0;
    border: 1px solid #aaa;
    border-right: 0px;
    font-size: 1.0em;
    line-height: 25px;
    height: 25px;
    padding: 0 10px;
    width: 188px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    position: relative; /** Not needed relative/top **/
    top: -2px; 
    vertical-align: bottom; /** top will also work... **/
}

#whois-lookup input[type=text]:focus
{
    outline: none;
}

#whois-lookup input[type=submit]
{
    margin-left: -4px;
    border: 1px solid #aaa;
    border-left: 0px;
    font-size: 1.0em;
    line-height: 27px;
    height: 27px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    color: #666;
    cursor: pointer;
    background-color: #fff;
    vertical-align: bottom; /** top will also work... **/
}

You set two different line-heights and heights for the input text and the input submit elements, not totally obvious but seems to work.

Fiddle: http://jsfiddle.net/audetwebdesign/WVG9L/17/