我的应用程序中有一个搜索框,其中包含以下html源代码:
<div class="nobg">
<form id="search_form" onsubmit="return validateSearchForm();" action="">
<table align="center">
<tr>
<td>
<div class="searchDiv">
<form id="search_form" onsubmit="return false;" action=""/>
<input name="searchText" class="searchBox" id="searchText" style="font-style: italic;" onfocus="setSearchTextOnFocus(this)" onblur="setSearchTextOnBlur(this)" type="text" value="Affiliate Name"/>
<input name="search_options" id="search_options" type="hidden" value="affiliate_name"/>
<input name="search" class="searchButton" onclick="" type="submit"/>
<span id="icon_clear" jQuery1319611343728="17">x</span>
</div>
</td>
</tr>
<tr>
<!--Search options -- Affiliate Name|Site Id|Site Name...-->
</tr>
</table>
</form>
</div>
现在在Firefox / Chrome中,搜索框的呈现方式如图所示:
而在IE中,它呈现为:
当我查看IE开发人员工具时,我发现这是由 searchDiv
的height属性引起的关联的css是:
.searchDiv {
PADDING-BOTTOM: 0px;
PADDING-LEFT: 0px;
WIDTH: 450px;
PADDING-RIGHT: 0px;
FLOAT: left;
HEIGHT: 25px;
PADDING-TOP: 0px
}
td中的 div 会导致额外的空间。 如果我删除了height属性, searchDiv 会在搜索框中折叠,而这是在firefox / chrome中。
IE中td内的固定高度div应该有一些渲染问题。我怎么能克服这个?