div width auto! важный, похоже, не работает в ie6 / ie7 - PullRequest
Новая
       8

div width auto! важный, похоже, не работает в ie6 / ie7

1 голос
/ 14 сентября 2011

HTML 

<div class="grid_11 omega" id="homeGalleryFichaGold">
        <div class="contSlideGalleryUp" style="display: none;"> 
                                    <a href="javascript:;" onclick="$('#panelGallery').slideToggle(); $('.contSlideGalleryUp').hide(); $('.contSlideGalleryDown').slideToggle('slow');" id="openGallery" class="openGallery" title="">HOTEL GALLERY</a>
        </div>
        <div style="display: block;" class="contSlideGalleryDown"> 
                                    <a href="javascript:;" onclick="$('#panelGallery').slideToggle(); $('.contSlideGalleryUp').slideToggle('slow'); $('.contSlideGalleryDown').hide();" id="closeGallery" class="closeGallery" title="">HOTEL GALLERY</a>
                                </div>                        
                                <div style="display: block;" id="panelGallery">
                                    <ul>
                                        <li class="selected"><a class="photos" href="#" title=""><span>PHOTOS</span></a></li>
                                        <li><a class="videos" href="#" title=""><span>VIDEOS</span></a></li>
                                        <li><a class="suites" href="#" title=""><span>SUITES 3D</span></a></li>
                                        <li><a class="location" href="#" title=""><span>LOCATION</span></a></li>
                                        <li><a class="publication" href="#" title=""><span>PUBLICATION</span></a></li>
                                        <li><a class="tour" href="#" title=""><span>INTERACTIVE TOUR</span></a></li>
                                        <li><a class="panorama" href="#" title=""><span>PANORAMA</span></a></li>
                                        <li><a class="googlearth" href="#" title=""><span>GOOGLE EARTH</span></a></li>
                                    </ul>
          </div>                                       
    </div>

По сути, я не могу получить #panelGallery иметь «автоматическую» ширину в IE6 / 7 (отлично работает во всех остальных)

CSS 

    #panelGallery {
        background-color: #333;
        color: #FFFFFF;
        float: right;
        font-size: 11px;
        font-weight: bold;
        height: 65px;
        line-height: 65px;
        opacity: 0.9;
        /*width: 640px;*/
        position:absolute;
        bottom: 0px;
        right:0px;  
    }
    .contSlideGalleryDown {
    position:absolute;
    bottom: 65px;
    right:0;
}

И я добавляю этот хак для ie6 / 7 

#panelGallery {
    *width: auto !important;
}

Но все равно использует всю ширину

Ответы [ 2 ]

1 голос
/ 14 сентября 2011

Похоже, что IE использует режим Quirks, потому что я уверен, что IE6 / IE7 поддерживает width:auto. Вы можете вставить букмарклет ниже, чтобы определить режим рендеринга. 

javascript:alert(document.compatMode)

CSS1Compat означает Режим Стандартов и BackCompat Режим Причуд.

Если он показывает BackCompat, это означает, что IE видел что-то до <!DOCTYPE>. IE 6 и 7 используют режим Quirks, если он видит почти что-либо до того, как DOCTYPE, метка спецификации или HTML-комментарий будут учитываться.

Уже есть какой-то вопрос по этому поводу, поэтому я просто сошлюсь на него: Почему сайт работает в режиме IE quirks?

Кстати, http://validator.nu/ может определить, будет ли сайт вызывать режим Quirks в IE, используя комментарии или метку спецификации.

Кроме того, некоторые DOCTYPE s могут активировать режим Quirks, даже если перед ними нет ничего, что может активировать режим Quirks. http://hsivonen.iki.fi/doctype/ содержит список этих специальных DOCTYPE s.

0 голосов
/ 14 сентября 2011

Вы пытались использовать условное утверждение, а не взломать звезду?

Что-то вроде: 

<!--[if lte IE 7]>
<style>
#panelGallery {
   width: auto !important;
}

</style>
<![endif]-->
...