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 browser), 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!

回答1:

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.

回答2:

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

回答3:

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.

来源：https://stackoverflow.com/questions/5783760/modernizr-how-do-i-detect-css-displaytable-cell-support

标签

html

css

modernizr