当我使用 jquery 的 .hide 功能来切换某些 div 时，这些 div 会在 div 之后重叠（仅在 ie8 中）答案

【问题标题】：When I use jquery's .hide feature to toggle some div's, the divs overlap following divs (only in ie8)当我使用 jquery 的 .hide 功能来切换某些 div 时，这些 div 会在 div 之后重叠（仅在 ie8 中）
【发布时间】：2010-08-23 18:28:39
【问题描述】：

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

这是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 中一切正常...

【问题讨论】：

这不是您期望它的行为方式吗？ jsfiddle.net/aabxe 这正是你的代码（用纯文本替换 php 部分），它似乎工作

标签： jquery select show-hide

【解决方案1】：

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

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

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

【讨论】：