当我使用 jquery 的 .hide 功能来切换某些 div 时，div 会与下面的 div 重叠（仅在 ie8 中）

Question

我正在使用 jquery 根据选择框选项隐藏和显示一些 div。当我更改选择框的值时，应该发生的操作会发生，但显示的 div 位于下一个 div 的下方（该 div 没有被“推”下）。

这是 jquery 代码：

<script type='text/javascript'>
$(document).ready(function(){
$('#alldates').hide();
$('#dateselect').hide();
$('#dateselectchoices').change(function(){
$('#' + this.value).show().siblings().hide();
});
$('#dateselectchoices').change();
});

$(document).ready(function(){
$('#nocountyselect').hide();
$('#countyselect').hide();
$('#regionselect').hide();
$('#countyselectchoices').change(function(){
$('#' + this.value).show().siblings().hide();
});
$('#countyselectchoices').change();
});
</script>

以及随后的 html：

<div class="tbl_container">
<span class="tbl_left">Registered Date Range:</span>
<span class="tbl_right"><select id='dateselectchoices' name='$rangename'><option value='alldates'>All Dates</option>
<option value='dateselect'>Specify Date Range</option>
</select>

<div id='boxes'>
<div id='alldates'></div>
<div id='dateselect'><span style='width:80px; display:inline-block;'>Start Date: </span><span style='display:inline-block;'>
<input type='text' class='input-medium' name='rangestart' id='rangestart' />&nbsp;<a href='#' onClick=\"cal.select(document.getElementById('rangestart'),'startanchor','yyyy-MM-dd'); return false;\" name='startanchor' id='startanchor'>
<img src='http://www.ampltek.net/marn/calendar.jpg' border='0' /></a></span><br/>
<span style='width:80px; display:inline-block;'>End Date: </span><span style='display:inline-block;'>
<input type='text' class='input-medium' name='rangeend' id='rangeend' />&nbsp;<a href='#' onClick=\"cal.select(document.getElementById('rangeend'),'endanchor','yyyy-MM-dd'); return false;\" name='endanchor' id='endanchor'>
<img src='http://www.ampltek.net/marn/calendar.jpg' border='0' /></a></span></div>
</div>
</span>
</div>

<div class="tbl_container">
<span class="tbl_left">County/Region:</span>
<span class="tbl_right"><select id='countyselectchoices' name='countyselectchoices'>
<option value='nocountyselect' selected='selected'>Any</option>
<option value='countyselect'>County</option>
<option value='regionselect'>Region</option>
</select>
<div id='boxes2' style='display:inline-block; -moz-inline-stack; zoom: 1; *display: inline;'>
<div id='nocountyselect'></div><div id='countyselect'><?php countySelect(countychoice); ?></div><div id='regionselect'><?php regionSelect(regionchoice); ?></div>
</div></span>
</div>

这些选择框中的第二个不会创建选项，因为它显示的框与其内嵌显示。有什么想法吗？在 Firefox 3/Chrome 中一切正常...

Answer 1

我最近在网页上遇到了类似的问题。
我听说 IE8 与 jquery 不兼容，尽管这看起来很奇怪。

我通过将此行放在标题标签中解决了我的问题。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />