搜索框中有图像奇怪的问题

Question

拥有以下搜索框图片：

使用以下代码和css：

#searchcontainer {
margin: 40px 0 0 0; 
}

.search {
    float: right;
    margin: 0;
    padding: 0;
    height: 21px;   
    width: 310px;

}
.search input,
.search button {
    margin: 0;
    padding: 0;
    font-size: 0.9em;
    color: #A7A9AC;
    border: 0;
    outline: none;
}

.search input.box {
    margin: 0;
    padding: 2px 5px 0 5px;
    width:230px;
    height: 19px;
    background: #FFF url(images/search.gif) no-repeat top left;
}

.search input.btn {
    margin: 0 0 0 -5px;
    padding: 0;
    width:70px;
    height: 21px;
    cursor:pointer;
    cursor: hand; /* cross browser */
    text-indent: -9999px;
    background: #FFF url(images/search.gif) no-repeat top right;
}


<div id="searchcontainer">
          <form id="searchform" class="search" method="post" action="#">
            <input name="box" type="text" value="zoek..." class="box" />
            <input name="btn" type="button" class="btn" />
          </form>
        </div>

在Firefox中它看起来没问题，但在ie和chrome中按钮“Zoek”有点下降，见图像

在我看来，CSS很好。但无法找到出错的地方。

Answer 1

添加float属性，它将有效。

.search input.btn {
    width:70px;
    height: 19px;
    position: relative;
    float: left;
    cursor:pointer;
    display: inline-block;
    cursor: hand; /* cross browser */
    background: #DDDDDD url(images/search.gif) no-repeat top right;
}

修改

Example