溢出可见不工作在IE 8

Question

我有一个列表框，显示当我mouseover一个input框。我的问题是列表框，即使我指定CSS规则overflow:visible它仍然显示整个列表框，而是它适合列表框外部div的宽度。

但是，如果我尝试使用Firefox或Chrome查看它，则会显示整个列表框。请帮忙。

感谢， 雪利酒

---

更新：这里的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;} 

---

而且我用

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


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

Answer 1

有ID为“ctl00_ctl00_ctl00_ContentPlaceHolderDefault_FloraHotelsReservationForm_3_txtHotel”，没有元素这就是你在你的jQuery选择参考的了slideDown（）jQuery的语法。你可能想这个：

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

你div.​​restHotel元素被默认设置为可见的，所以它是可见向右走，而不是等待光标悬停在输入框。

您的示例代码未定义JavaScript setHotel（）方法。

除此之外，您的示例似乎使用IE8浏览器模式在IE9 Beta中工作。如果您的示例代码没有演示出现其他问题，那么您可能需要提供更多信息。