使用CSS设置搜索框和搜索按钮的样式

Question

我的搜索框出现问题，搜索框与搜索按钮之间存在间隙，此问题仅存在于IE7 / 8/9中。但它在Firefox中很好。

编辑：在IE中，光标也更高，但在Firefox中更完美。

JSFIDDLE： http://jsfiddle.net/bM7PQ/

HTML：

<form action="search.aspx" method="get" class="topsearchform" name="topsearchform">
    <fieldset>

    <!--<label>Search:</label>-->

    <input type="text" autocomplete="off" id="Text1" class="searchBox" name="SearchTerm" size="15">
    <input width="23" type="image" height="23" border="0" onclick="document.topsearchform.submit()" alt="Submit Form" src="http://i45.tinypic.com/ojkznb.png" class="searchButton">
    </fieldset>
</form>

CSS：

form.topsearchform {
    left: 70px;
    padding-right: 20px;
    position: absolute;
    top: 87px;
    width: 139px;
}

#topLinks form fieldset {
    vertical-align: middle;
}


#Text1 {
    background-color: transparent;
    background-image: url("http://i46.tinypic.com/35c0n78.png");
    border: 0 none;
    height: 23px;
    padding-left: 3px;
    padding-right: 3px;
    width: 130px;
}


input.searchButton {
    background-color: transparent;
    background-image: url("http://i49.tinypic.com/r0rrtl.png");
    position: absolute;
}

IE中的问题：

Answer 1

将此行添加到input.searchButton

left:133px;

Answer 2

您是否在自己的风格之前应用了任何类型的CSS重置？这有很大帮助，因为它倾向于规范html元素在不同浏览器上的显示方式。

Answer 3

这可以满足你的需要而且没有位置：绝对，检查小提琴：http://jsfiddle.net/LvP43/

form.topsearchform {
    left: 70px;
    padding-right: 20px;
    position: absolute;
    top: 87px;
    width: 159px;
}

#topLinks form fieldset {
    vertical-align: middle;
}


#Text1 {
    background-color: transparent;
    background-image: url("http://i46.tinypic.com/35c0n78.png");
    border: 0 none;
    height: 23px;
    padding-left: 3px;
    padding-right: 3px;
    width: 130px;
    float: left;
}


input.searchButton {
    background-color: transparent;
    background-image: url("http://i49.tinypic.com/r0rrtl.png");
    float: left;
}