-1

我的搜索框有问题，搜索框的搜索按钮之间有间隙，并且此问题仅存在于 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中的问题：

在此处输入图像描述

4

3 回答 3

1

这可以满足您的需要并且没有位置：绝对，检查小提琴：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;
}
于 2012-06-13T11:26:57.883 回答
1

将此行添加到input.searchButton 

left:133px;
于 2012-06-13T10:42:56.017 回答
1

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

于 2012-06-13T10:43:14.057 回答