div width auto !important 似乎在 ie6/ie7 中不起作用

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 添加了这个 hack

#panelGallery {
    *width: auto !important;
}

但仍然使用所有宽度

Answer 1

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

javascript:alert(document.compatMode)

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

如果它显示BackCompat，则意味着IE在<!DOCTYPE>之前看到了一些东西。如果 IE 6 和 7 在 DOCTYPE、BOM 标记或 HTML 注释计入其中之前看到几乎所有内容，则使用 Quirks Mode。

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

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

另外，一些DOCTYPEs 可以触发怪癖模式，即使在他们触发怪癖模式之前没有任何东西。 http://hsivonen.iki.fi/doctype/ 包含那些特殊的DOCTYPEs 的列表。

Answer 2

您是否尝试过使用条件语句而不是明星黑客？

类似：

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

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