html - 带有图像的搜索框在 ie 中出现奇怪的问题

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