jquery - IE 7 での CSS の問題

Question

nth-childCSSとしてIE 7で使用しようとしています。ただし、それをサポートしていないようです。とにかくそれを回避する方法はありますか？ありがとう。

私のCSS

.table tr:nth-child(odd) {
background-color: #FFFEE8;
}

.table tr:nth-child(even) {
background-color: #FFFFFF;
}

Answer 1

ベスト プラクティス: JavaScript を使用しないソリューション

クライアント側でスタイルを決定するために JavaScript を使用しないでください。それは悪い習慣です。

代わりに、サーバー側に" odd" または " " クラスを追加してください。even

たとえば、PHP を使用して配列からテーブルをレンダリングする場合、次のようにします。

<?php
$i = 0;
foreach ($rows as $row) {
    $odd_even_class = ($i%2 == 0) ? 'even' : 'odd';
    echo '<tr class="'.$odd_even_class.'"> ... </tr>';
    $i++;
} 
?>

次に、CSS を使用して 2 つのクラスを適切にスタイルします。これは、すべてのブラウザーで機能します。

.table tr.odd {
    background-color: #FFFEE8;
}

.table tr.even {
    background-color: #FFFFFF;
}

JavaScript を使用している場合は、少なくともすべてのブラウザへの影響を避ける

JavaScript ソリューションを使用する場合は、少なくとも最新の CSS をサポートするブラウザーの過負荷を回避してください。

JavaScript の修正を、IE 以外のブラウザーでの実行を防ぐ条件ステートメントに入れます。

<!--[if IE]>
<script>
    $(document).ready(function(){
        $('.table tr:even').addClass('even');
        $('.table tr:odd').addClass('odd');
    });
</script>
<![endif]-->

そして、CSS で IE と最新のブラウザーの両方を同時にカバーするようにしてください。

.table tr:nth-child(odd),
.table tr.odd {
    background-color: #FFFEE8;
}

.table tr:nth-child(even),
.table tr.even {
    background-color: #FFFFFF;
}

Answer 2

簡単な解決策は、Jquery を使用することです。

$(document).ready(function(){
    $('table tr:even').addClass('table-even');
    $('table tr:odd').addClass('table-odd');
});

ここにCSSを追加

.table-even{ /* your styles */ }
.table-odd{ /* your styles */ }

Answer 3

ここでjQueryを使用できます

$(document).ready(function(){
    $('.table tr:nth-child(odd)').addClass('odd-row');
    $('.table tr:nth-child(even)').addClass('even-row');
});

それから

.table tr.odd-row {
background-color: #FFFEE8;
}

.table tr.even-row {
background-color: #FFFFFF;
}