У меня есть одно окно поиска в моем приложении, которое имеет исходный 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 окно поиска отображается так, как показано на рисунке:
![enter image description here](https://i.stack.imgur.com/wPVLH.jpg)
, тогда как в IE он отображается как:
![enter image description here](https://i.stack.imgur.com/qBNLX.jpg)
Когда я проверил в инструментах разработчика IE, я обнаружил, что это вызваноАтрибут высоты searchDiv
связанный css:
.searchDiv {
PADDING-BOTTOM: 0px;
PADDING-LEFT: 0px;
WIDTH: 450px;
PADDING-RIGHT: 0px;
FLOAT: left;
HEIGHT: 25px;
PADDING-TOP: 0px
}
Этот div внутри td создает дополнительный пробел.Если я удаляю атрибут высоты, searchDiv сворачивается в окне поиска, и это происходит в Firefox / Chrome.
Должна быть некоторая проблема с рендерингом для фиксированных высот внутри div вIEКак я могу преодолеть это?