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 模式，因为我确信 IE6/IE7 支持 width:auto。您可以在下面插入书签来检测渲染模式。

javascript:alert(document.compatMode)

CSS1Compat 表示标准模式和 BackCompat Quirks 模式。

如果它显示 BackCompat，则意味着 IE 在 之前看到过某些内容。如果 IE 6 和 7 在 DOCTYPE、BOM 标记或 HTML 注释计入之前看到几乎任何内容，则使用 Quirks 模式。

已经有一些关于它的问题，所以我将链接到它： 为什么网站以 IE 怪异模式运行？

顺便说一句，http://validator.nu/< /a> 可以使用注释或 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]-->