2

それをサポートするブラウザでのレイアウトに使用display: tableしたいと思います。display: table-cellIE7では、列をフロートさせたいだけですが（そのブラウザーで機能させることはできないと想定しているため）、Modernizrを使用してそれを行う方法については何も見つかりません。誰か助けてくれませんか？

条件付きのブラウザーを使用できると思いますが、別のCSSファイルを分割する必要がないことを望んでいました。

ありがとう！

4

3 に答える 3

5

IE7以下に単一の異なるルールを適用するだけの場合、この特定のジョブにModernizrを使用しないように誘惑されます。

する必要を避けるために、単にこのようなことをしてください"break out another CSS file"：

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

これは、スタープロパティハックを使用して、IE7以下のみにルールを提供します。

もう1つのオプションは!ie7ハックです。これは、奇妙な理由で私の最高得票数の回答です。

于 2011-04-25T22:55:35.463 に答える
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;
                    }
            })
    }
}());

ソース[リンク]

于 2014-05-12T15:14:48.107 に答える
0

IE 8は、作成された要素が「tfoot」であり、表示値が「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」がすでにdisplayを「table-footer-group」に設定しているという意味で、「正しい」可能性があります。しかし、それは（a）ユーザーがオーバーライドすることを許可せず、（b）それが機能しないことをユーザーに通知しないという意味で「間違っている」。他のブラウザはテストしていません。

于 2015-07-09T22:47:53.930 に答える