IE 8에서 오버플로 가시화가 작동하지 않습니다.

Question

mouseoverinput 상자를 표시하는 목록 상자가 있습니다. 내 문제는 목록 상자입니다. CSS 규칙을 지정하더라도 overflow:visible은 여전히 ​​전체 목록 상자를 보여 주며 대신 목록 상자의 너비는 바깥 쪽 div에 맞습니다.

Firefox 나 Chrome을 사용하여 보려고하면 전체 목록 상자가 표시됩니다. 도와주세요.

감사합니다, 셰리

---

업데이트 : 여기

<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;} 

---

,369에게 HTML 코드를입니다

내가

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


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

Answer 1

당신이) (slideDown에 대한 귀하의 jQuery 선택에 참조하는 것입니다되는 ID "ctl00_ctl00_ctl00_ContentPlaceHolderDefault_FloraHotelsReservationForm_3_txtHotel"아무 요소도 없다 사용하는 JQuery와 구문.

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

귀하의 div.restHotel 요소가 기본적으로 표시로 설정되어 있으므로 대신 입력 상자 위에 마우스 커서를 기다리는 바로 볼 수 있습니다 : 당신은 아마이 대신합니다.

예제 코드는 JavaScript setHotel() 메서드를 정의하지 않습니다.

이외의 예는 IE8 브라우저 모드를 사용하는 IE9 Beta에서 작동하는 것 같습니다. 예제 코드가 시연하지 않은 다른 잘못된 것이 여전히있는 경우 자세한 정보를 제공 할 수 있습니다.