web-dev-qa-db-ja.com

IE8の最初の子と最後の子

私は私のテーブルで物事を調整するためのいくつかのCSSを持っています。

ここにあります：

.editor td:first-child
{
    width: 150px; 
}

.editor td:last-child input,
.editor td:last-child textarea
{
    width: 500px;
    padding: 3px 5px 5px 5px;
    border: 1px solid #CCC; 
}

Firefox、SafariおよびChromeで動作しますが、IE8では（現時点では）動作しません。

問題は最初の子と最後の子に由来することは知っていますが、私は専門家ではありません。

どのように修正することができますか？

PS：htmlドキュメントの上に<!doctype html>を追加しましたが、何も変わりませんでした。

cssinternet-explorer-8css-selectors
60
Bronzato

テーブルの幅が2列しかない場合、隣接する兄弟セレクタを使用して2番目のtdに簡単に到達できます。IE8は:first-childとともにサポートします。

.editor td:first-child
{
    width: 150px; 
}

.editor td:first-child + td input,
.editor td:first-child + td textarea
{
    width: 500px;
    padding: 3px 5px 5px 5px;
    border: 1px solid #CCC; 
}

それ以外の場合は、jQueryのようなJSセレクターライブラリを使用するか、最後のtdに手動でクラスを追加する必要があります。 James Allardiceの提案による 。

68
BoltClock

:last-childはCSS3擬似クラスであるため、IE8ではサポートされていません。 :first-childはCSS2.1仕様で定義されているようにサポートされていると思います。

考えられる解決策の1つは、最後の子にクラス名とスタイルを単純に与えることです。

もう1つは、JavaScriptを使用することです。 jQueryは、IE8で動作するはずの :last-child 擬似クラスを提供するため、これを特に簡単にします。残念ながら、DOMの読み込み中にスタイルが設定されていないコンテンツがフラッシュされる可能性があります。

34
James Allardice

CSS3セレクターを引き続き使用したいが、古いブラウザーをサポートする必要がある場合は、 Selectivizr.js などのポリフィルを使用することをお勧めします

3
blues_driven