Видимое переполнение не работает в IE 8 - PullRequest
Новая
       1

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

0 голосов
/ 20 ноября 2010

У меня есть список, который показывает, когда я mouseover input поле. Моя проблема со списком, даже если я указываю 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>

Вот КСС 

#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");
 });

1 Ответ

0 голосов
/ 20 ноября 2010

Нет элемента с идентификатором "ctl00_ctl00_ctl00_ContentPlaceHolderDefault_FloraHotelsReservationForm_3_txtHotel", на который вы ссылаетесь в селекторе jQuery для slideDown ().Вы, вероятно, захотите это вместо этого: 

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

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

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

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

...