可见溢出在 IE 8 中不起作用

Question

我有一个列表框，当我鼠标悬停输入框时显示。我的问题是列表框，即使我指定 CSS 规则 overflow:visible 它现在仍然显示整个列表框，而是使列表框适合外部 div 的宽度。

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

谢谢， Sherry

---

更新：这是 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

没有 ID 为“ctl00_ctl00_ctl00_ContentPlaceHolderDefault_FloraHotelsReservationForm_3_txtHotel”的元素，这是您在 SlideDown() 的 jQuery 选择器中引用的元素。您可能想要这样：

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

您的 div.restHotel 元素默认设置为可见，因此它立即可见，而不是等待光标悬停在输入框上。

您的示例代码未定义 JavaScript setHotel() 方法。

除此之外，您的示例似乎可以使用 IE8 浏览器模式在 IE9 Beta 中运行。如果您的示例代码未演示仍然存在其他错误，那么您可能需要提供更多信息。