html - Modernizr：如何检测 CSS display:table-cell 支持？

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 及以下版本提供规则。

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

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

来源[链接]

Answer 3

当创建的元素是'tfoot'，并且显示值为'table-header-group'时，IE 8 不会说真话。以下代码段不会失败，即使 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' 已经将 display 设置为 'table-footer-group'；但它是“错误的”，因为它（a）不允许用户覆盖，并且（b）没有告诉用户它不会工作。我没有测试过其他浏览器。