Когда я использую функцию jhery .hide для переключения некоторых div, div перекрываются после div (только в ie8) - PullRequest
Новая
       21

Когда я использую функцию jhery .hide для переключения некоторых div, div перекрываются после div (только в ie8)

0 голосов
/ 23 августа 2010

Я использую 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 ...

1 Ответ

0 голосов
/ 23 августа 2010

У меня недавно были похожие проблемы с веб-страницей. Я слышал, что IE8 не совместим с jquery, хотя это кажется странным.

Я решил свою проблему, поместив эту строку в теги заголовка. 

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