div高度问题,即,具有固定高度高度的div实际上在firefox和ie中实际上不相同

时间:2011-10-26 07:59:13

标签: internet-explorer firefox html css

我的应用程序中有一个搜索框,其中包含以下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

而在IE中,它呈现为:

enter image description here

当我查看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应该有一些渲染问题。我怎么能克服这个?

0 个答案:

没有答案