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

【问题标题】：style a search box and search button using CSS使用 CSS 设置搜索框和搜索按钮的样式
【发布时间】：2012-06-13 19:54:11
【问题描述】：

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

【问题讨论】：

标签： css xhtml

【解决方案1】：

将此行添加到input.searchButton

left:133px;

【讨论】：

抱歉，这并不能解决问题。

【解决方案2】：

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

【讨论】：

添加了一个 css 重置并修复了 @Somebody 遇到问题的建议，但问题仍然存在。 jsfiddle.net/bM7PQ/3

【解决方案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;
}

【讨论】：