Question

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

但仍使用全宽

Answer 1

看起来IE使用Quirks Mode，因为我确信IE6 / IE7支持width:auto。您可以在下方插入书签以检测渲染模式。

javascript:alert(document.compatMode)

CSS1Compat表示标准模式和BackCompat怪癖模式。

如果显示BackCompat，则表示IE在<!DOCTYPE>之前看到了某些内容。如果在DOCTYPE，BOM标记或HTML注释计入其中之前几乎看到任何内容，IE 6和7将使用Quirks模式。

已经有一些问题，所以我只想链接到它：Why is the site running in IE quirks mode?

顺便说一句，http://validator.nu/可以通过使用注释或BOM标记来检测网站是否会触发IE中的Quirks模式。

此外，某些DOCTYPE可以触发Quirks模式，即使它们之前没有任何内容可以触发Quirks模式。 http://hsivonen.iki.fi/doctype/包含特殊DOCTYPE的列表。

Answer 2

您是否尝试使用条件语句而非星级黑客？

类似的东西：

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

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

div width auto！important似乎不适用于ie6 / ie7

2 个答案: