Modernizr: how do I detect CSS display:table-cell support?

I want to use display: table and display: table-cell for my layout in browsers that support it. In IE7 I simply want to float my columns (since I assume it's not possible to get it to work in that browse开发者_StackOverflow中文版r), but cannot find anything about how to do it using Modernizr. Can anyone help me please?

I suppose I could use a browser conditional, but was hoping to not have to break out another CSS file.

Thanks!

---

If all you want to do is apply a single different rule for IE7 and less, I'd be tempted not to use Modernizr for this specific job.

Simply do something like this, to avoid having to "break out another CSS file":

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

This uses the Star Property Hack to provide a rule to only IE7 and below.

Another option is the !ie7 hack, which is for some odd reason my highest voted answer.

---

... And if you want to use Modernizr, you could use this snippet:

(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]

---

IE 8 does not tell the truth when the created element is a 'tfoot', and the display value is 'table-header-group'. The following snippet will not fail, even though IE 8 ignores the CSS setting and continues to display 'tfoot' below 'tbody'.

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.');
}

It might be 'correct', in the sense that 'tfoot' has already set display to 'table-footer-group'; but it's 'wrong' in the sense that it (a) doesn't allow the user to override, and (b) doesn't tell the user that it isn't going to work. I haven't tested other browsers.