css - IE7 CSS テーブルヘッダーの境界線が tbody セルに整列しない

Question

x 軸と y 軸の両方にスクロールテーブルが必要です。

これは、jQuery を使用して既存のテーブルヘッダーを新しいテーブルに複製することで実現しました。

ここで問題を嘲笑しました：

IE7 では、CSS が同じであっても、複製された thead セルの境界線が親の thbody セルと一致しません。

これに対する修正はありますか？

これはベストプラクティスではなく、IE7 は死にかけているブラウザーですが、クライアントの要件であることを理解しています。

score 2 · Accepted Answer

このルールの削除:

.grid-cntr .data-grid thead {
    display: none;
}

境界線を揃えました。しかし明らかに、IE7 でもスレッドを非表示にしたいので、ハックを使用しましょう。

.grid-cntr .data-grid thead {
    display: none;
    *display:block; /* target IE7 and below only */
}

次に、次のルールを追加します。

.grid-cntr .data-grid {
    *margin-top:-32px;
}

それ以外の場合は、コードを「クリーン」に保ちたい場合は、条件付きコメントを使用できます。

通常の CSS の後に、このコードを head セクションに追加します。

<!--[if lte IE 8]>
<style>
.grid-cntr .data-grid thead { display:block; }
grid-cntr .data-grid { margin-top:-32px; }
</style>
<![endif]-->

とにかく、セレクターを使用していますが、この互換性テーブルを確認:first-childしてください。:last-child

IE7+ との完全な互換性が必要な場合は、代わりにクラスを使用してみてください。

古い IE バージョンの CSS3 セレクターに最適なie9.jsもあります。

次に、次のルールがあります。

.data-grid td:first-child {
    border-width: 1px 0 0 0;
}

このルールが最後の行を上書きすることを知っていますか?

.data-grid tr:last-child td {
    border-width: 1px 1px 0 1px;
}

多分あなたは使いたい

.data-grid td:first-child {
    border-width: 1px 0 0 0 !important;
}

css - IE7 CSS テーブル ヘッダーの境界線が tbody セルに整列しない