Переполнение видимое не работает в IE 8

Question

У меня есть окно списка, которое показывает, когда я mouseoverinput. Моя проблема - это список, даже если я укажу правило CSS overflow:visible, оно все еще показывает полный список, и вместо этого он подходит для списка по ширине внешнего div.

Но если я попытаюсь просмотреть его с помощью Firefox или Chrome, отобразится весь список. Пожалуйста помоги.

Спасибо, Sherry

---

Update: Вот HTML код

<div id="book_panel"> 
    <div id="book_heading"> 
     <div style="padding:5px 0 0 5px;"> 
      <span style="font-size:22px; font-family: Arial, Verdana, Sans-Serif;">Book Now</span><span style="font-size:19px; font-family:Arial;color:#e9d59e;">&nbsp;|&nbsp;</span> 
      <span style="font-size:12px; font-family: Arial, Verdana, Sans-Serif;color:#e9d59e;">Best rate guarantee</span> 
     </div> 
    </div> 
    <div id="booking_form_row1"> 
     <div id="row1Row1"><label id="findHotel">Hotel</label></div> 
     <div id="row1Row2" > 
      <div id="hotelSelector"> 
       <input id="txtHotel" name="txtHotel" value="Select a Hotel" runat="server" /> 
       <input id="txtHotelValue" type="hidden" runat="server" /> 
       <div class="restHotel"> 
        <table border="0" cellpadding="0" cellspacing="0"> 
         <tr><td>&nbsp;<b>Hotels</b></td></tr> 
         <tr onclick="return setHotel(1,'Flora Grand, Near Al Ghurair Shopping Mall, Dubai');" class="highLightRow"> 
          <td width="150px;"><a href="#" title="Flora Grand, Near Al Ghurair Shopping Mall, Dubai" id="lnkHotel1">Flora Grand</a></td> 
          <td width="200px;">Near Al Ghurair Shopping Mall</td> 
          <td width="50px;">Dubai</td> 
          <td><asp:Image ID="Image5" runat="server" ImageUrl="../media/images/four_star.png" Width="44" Height="8" /></td> 
         </tr> 
        </table> 
       </div> 
      </div> 
     </div> 
    </div> 

---

Вот CSS

#book_panel {overflow:visible!important;padding:0!important;max-height:330px;width:270px;position:absolute;color:#fff;top:120px; left:10px; z-index:9999; border: 0px red solid; background-color:#201913; filter: alpha(opacity=90); opacity: 0.9; -webkit-opacity: 0.9; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=90)";} 
#book_panel #book_heading {display:block;position:relative;border: 0px red solid; text-align:left; width:270px;margin: 0; height:30px;background-color:#362615;filter: alpha(opacity=90); opacity: 0.9; -webkit-opacity: 0.9; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=90)";} 

.hiLightRow{background-color:#201913; cursor:hand;} 

#book_panel label {width:80px; display:block; margin:2px 0 5px 0;padding:0; float:left; color: #fff; font: normal 12px Arial, Verdana,sans-serif!important;} 
#book_panel select{width:55px;color: #000;background: #f9f9f9;border: 1px solid #e9d59e; padding-left: 3px;} 
#book_panel input {font-size:13px;} 
#book_panel a:hover{background-color:#201913;color:#fff;} 

#book_panel div#booking_form_row1 input {width:240px;} 
#book_panel div#booking_form_row1 {float:left; width:250px;position:relative;margin: 0 10px 0 10px; border: 0px solid red;} 
#book_panel div#booking_form_row1 #row1Row1 {width:250px;height:19px;float:left;margin-top:3px;} 
#book_panel div#booking_form_row1 #row1Row2 {width:250px;float:left;margin-top:3px;border: 0px solid red;} 

/*Hotel Fancy Listbox */ 
#book_panel div#booking_form_row1 #row1Row2 .restHotel{position:absolute;z-index:9999; width:450px!important;overflow:visible!important;} 
#book_panel div#booking_form_row1 #row1Row2 table {float:left;margin:0;padding:0;width:450px!important;border:1px solid #a57e03;background-color:#6b5527;} 
#book_panel div#booking_form_row1 #row1Row2 tr {width:450px;color:#fff;font: 12px Arial, Verdana, sans-serif;padding-left:3px;padding:2px 3px 2px 5px;overflow:visible!important;} 
#book_panel div#booking_form_row1 #row1Row2 td a{color:#fff;font: 13px Arial, Verdana, sans-serif;padding:1px 2px 1px 4px;} 

---

и синтаксис JQuery, который я использую

$("#ctl00_ctl00_ctl00_ContentPlaceHolderDefault_FloraHotelsReservationForm_3_txtHotel").hover(function() { 
     $(".restHotel").slideDown("300"); 
}); 


$(".restHotel").mouseleave(function() { 
$(this).slideUp("300"); 
}); 

Answer 1

Там нет элемента с идентификатором «ctl00_ctl00_ctl00_ContentPlaceHolderDefault_FloraHotelsReservationForm_3_txtHotel», которая является то, что вы ссылаетесь в вашем селекторе JQuery для slideDown(). Вы, вероятно, хотите вместо этого:

$("#txtHotel").hover(function() { 
    $(".restHotel").slideDown("300"); 
}); 

Ваш div.restHotel элемент является видимым по умолчанию, так что видно сразу, а не ждать, пока курсор наведите курсор мыши на поле ввода.

Ваш примерный код не определяет метод JavaScript setHotel().

Кроме этого, ваш пример, похоже, работает в IE9 Beta, используя режим браузера IE8. Если еще что-то не так, что ваш примерный код не демонстрирует, тогда вы можете предоставить дополнительную информацию.