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

Question

我想在支持它的浏览器中使用 display: table 和 display: table-cell 进行布局。在 IE7 中，我只是想浮动我的列（因为我假设它不可能在该浏览器中工作），但无法找到有关如何使用 Modernizr 执行此操作的任何信息。有人可以帮我吗？

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

谢谢！

Answer 1

如果您只想对 IE7 及以下版本应用一个不同的规则，我会倾向于不使用 Modernizr 来完成此特定工作。

只需执行类似这样的操作，即可避免“分解另一个 CSS 文件”：

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

Source [Link]

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”已经将显示设置为“table-footer-group”；但它是“错误的”，因为它（a）不允许用户覆盖，并且（b）没有告诉用户它不会工作。我没有测试过其他浏览器。