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" />

当我使用jquery的.hide功能切换一些div时，div在div之后重叠（仅在ie8中）

1 个答案: