Question

我想在支持它的浏览器中使用display: table和display: table-cell作为我的布局。在IE7中我只想浮动我的列（因为我认为它不可能让它在该浏览器中工作），但是找不到任何关于如何使用Modernizr来做它。有人可以帮我吗？

我想我可以使用浏览器条件，但希望不必打破另一个CSS文件。

谢谢！

Answer 1

如果您只想为IE7应用一个不同的规则，那么我很想不使用Modernizr来完成这项工作。

简单地做这样的事情，以避免"break out another CSS file"：

#menu li {
    display: table-cell;
    *float: left;
}

这使用Star Property Hack为IE7及以下版本提供规则。

另一种选择是!ie7 hack，这是出于某种奇怪的原因，我的答案最高。

Answer 2

...如果你想使用Modernizr，你可以使用这个片段：

(function() {
    var displayTests = ["table", "table-caption", "table-cell",
    "table-column", "table-column-group", "table-footer-group",
    "table-header-group", "table-row", "table-row-group"];

    var rules = document.createElement("div").style;

    for (var c=0; c<displayTests.length; c++) {
            var testValue = displayTests[c];
            Modernizr.addTest("display" + testValue, function() {
                    try {
                            rules.display = testValue;
                            return rules.display == testValue;
                    } catch (e) {
                            return false;
                    }
            })
    }
}());

来源 [Link]

Answer 3

当创建的元素是'tfoot'时，IE 8并没有说实话，显示值是'table-header-group'。以下代码段不会失败，即使IE 8忽略了CSS设置并继续在'tbody'下面显示'tfoot'。

try {
    var x = document.createElement('tfoot').style;
    x.display = 'table-header-group';
    console.log('Both IE 8 and Chrome end up here.');
} catch (e) {
    console.log('Except IE 8 should have ended up here, since it does not move the tfoot element.');
}

它可能是'正确的'，因为'tfoot'已经将显示设置为'table-footer-group';但它是“错误的”，因为它（a）不允许用户覆盖，（b）不告诉用户它不会起作用。我还没有测试过其他浏览器。

Modernizr：我如何检测CSS显示：table-cell支持？

3 个答案: