Google Chrome下的CSS问题（文本框和按钮）

Question

我对文本框和按钮的定位存在问题，它在Chrome下无法正确显示。

以下是每个浏览器的示例，因为您可以看到Chrome下的文本框被推出位置。

Internet Explorer / Firefox

铬

HTML：

<div id="divSearch">
   <input type="text" id="txtSearch" placeholder=" Search..."/>
   <input type="submit" id="btnSearch" value=""/>
</div>`

CSS：

input[type=text]{
    width: 200px;
    height: 24px;
    border: none;
    border-radius: 3px 0px 0px 3px;
    -webkit-border-radius: 3px 0px 0px 3px;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 0;
}

input[type="submit"]{
    border: none;
    border-radius: 0px 3px 3px 0px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-border-radius: 0px 3px 3px 0px;
    width: 32px;
    height: 24px;
    background: url(../img/search_button.png) no-repeat;
    background-color: white;
    background-position: 10px 5px;
}

#divSearch{
float: right;
width: 300px;
height: 40px;
white-space: nowrap;
margin-right: 50px;
}

现在，如果我从input[type="submit"]移除高度，定位很好，除了按钮现在是错误的大小。

我无法弄清楚为什么按钮的高度会导致问题。关于如何解决它的任何建议？

谢谢

Answer 1

添加以下代码。它应该工作：

input[type=text]{
  float:left
}

Answer 2

使按钮值非空将解决此问题。

<input type="submit" id="btnSearch" value="&nbsp;"/>

根本原因是按钮没有文本基线。