Html 将输入文本和输入提交设置在同一高度时出现问题

我想把文本输入放在与提交按钮相同的行和高度上。看。在Chrome中，这项功能完美无瑕，但在Firefox中，提交按钮低于文本输入。我该如何解决这个问题。 HTML

如前所述（请参阅CBroe的评论），您只需要以下CSS，请参阅嵌入的评论：

#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... **/
}

您为输入文本和输入提交元素设置了两种不同的行高和高度，虽然不完全明显，但似乎有效

---

Fiddle:

只需放下文本输入的相对位置，并将两个输入的

垂直对齐设置为相同的值。
#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;
    }

#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... **/
}