html - Google Chrome 下的 CSS 问题(文本框和按钮)

Question

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

这是来自每个浏览器的示例，您可以看到 Chrome 下的文本框被推到了不合适的位置。

Internet Explorer/火狐

Chrome

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
}