CSS，min-width在兼容模式下不起作用

Question

我正在使用网站的下拉菜单，在IE8中它工作正常，但是当我进入兼容模式时，下拉菜单看起来不对。背景颜色仅与每个列表元素中的文本一样宽。这是问题的图像。

以下是它在IE8中的外观，这是正确的方法：

似乎在兼容模式下工作的一个css属性是min-width，我假设兼容模式是IE的旧版本？或者至少我假设这个问题会在IE7中发生。这是此菜单的css属性：

#main_menu li ul {
    margin:0;
    padding:0;
    position:absolute;
    visibility:hidden;
    border:no-border;
}

#main_menu li ul li {
    float:none;
    display:inline;
}

#main_menu li ul li a {
    background:#efefef;
    color:#24313C;
    text-align:left;
    text-transform:none;
    font-weight:normal;
    letter-spacing:normal;
    min-width:70px;
}

如果IE能像IE8一样工作，那么如何获取旧版本？

修改 这是添加显示时的图像：块和宽度：70px。正如您所看到的那样，它会切断，尝试让它自动扩展到菜单中最长的文本，就像在IE8中一样。

Answer 1

使用width而不是min-width并添加display：block;风格：

#main_menu li ul li a {
    display: block;
    background:#efefef;
    color:#24313C;
    text-align:left;
    text-transform:none;
    font-weight:normal;
    letter-spacing:normal;
    width:70px;
}

Answer 2

这是未经测试的，但尝试做类似的事情：

#main_menu li ul li a {
    display: block;
    background:#efefef;
    color:#24313C;
    text-align:left;
    text-transform:none;
    font-weight:normal;
    letter-spacing:normal;
    min-width:70px;
    width:auto !important;
    width: 70px;
}

我认为这将使IE工作：D

Answer 3

最好的方法是使用JavaScript检测最宽的元素，然后将元素设置为该宽度 - 请参阅jsfiddle（http://jsfiddle.net/NneMQ/）。我在IE7中检查过，只要我了解你的要求，它就可以工作。

我使用的jQuery是：

    $(function () {
        var target = $('#main_menu li ul li');
        var target_array = [];
        target.each(function (i) {
            target_array[i] = $(this).width();
        });
        // get widest element and add 10px of padding on the right
        var max_width = Math.max.apply(null, target_array)+10; 
        target.find('a').css( { 'width': max_width + 'px', 'display': 'block' } );

    });

修改

好抓。我更新了代码以使用多个列表。它适用于IE7和IE8兼容模式（无论如何都是为了模拟IE7）：

请参阅http://jsfiddle.net/g_thom/NneMQ/1/

更新了jQuery：

    var target = $('#main_menu > li');
    var target_array = [];
    target.each(function (i) {
        $(this).find('li').each(function (j) {
            target_array[j] = $(this).width();
        });
        // get widest element and add right padding of 10 px
        var max_width = Math.max.apply(null, target_array)+10;
        target.eq(i).find('a').css( { 'width': max_width + 'px', 'display': 'block' } );
    });