0

こんにちはみんな私は次のものを持っています..

.selected2:first-child{
   background: url(../img/css/first-selected.png) no-repeat !important;
   background-position: center center !important;
   box-shadow: inset 1px 1px 5px 2px rgba(221,221,221,1) !important;
}
.selected2{
   background: url(../img/css/second-selected.png) no-repeat !important;
   background-position: center center !important;
   box-shadow: inset 1px 1px 5px 2px rgba(221,221,221,1) !important;
}
.selected2:last-child{
   background: url(../img/css/third-selected.png) no-repeat !important;
   background-position: center center !important;
   box-shadow: inset 1px 1px 5px 2px rgba(221,221,221,1) !important;
}

ie9、chrome、opera、firefox で完璧に動作しますが、ie8 ではすべての li 要素で 2 番目の背景しか取得できません。

何が問題ですか？ie8 は最初の子をサポートしていませんか?

4

3 に答える 3

7

ここには 2 つの問題があります。1 つ目は:last-childセレクター、2 つ目は RGBA 背景色です。

  1. IE8 はサポートしていません:last-child。（サポートはし:first-childますが）

    Quirksmode.org で、これら (および他のすべての CSS セレクター) のブラウザー サポートを確認できます。

    IE8 のサポートが必要な場合にこれに対処する最も簡単で簡単な方法は、関連する要素にクラスを追加し、代わりにそのようにスタイルを設定することです。これは昔ながらのやり方ですが、IE8 は昔ながらのブラウザーのようなものです。

    のようなセレクターを本当に使用する必要が:last-childあり、IE8 をサポートする必要がある場合は、試すことができる Javascript ソリューションがあります。

    • http://selectivizr.com/ -- これは、古い IE バージョンに多数の CSS セレクターのサポートを追加する JS ライブラリです。ハードワークを行うために使用するjQueryなどの別のライブラリも使用する必要があります。

    • https://code.google.com/p/ie7-js/ -- これは IE の古いバージョンにパッチを適用して、できるだけ多くのバグや癖を修正し、不足している機能を可能な限り埋め戻そうとする JS ライブラリです。可能。やっていることはかなり多岐にわたります。高度な CSS 機能のほとんどが含まれています。

    :last-childJS を無効にしているユーザーがいない限り、これらのライブラリのいずれかでサポートを追加できます。

  2. ただし、前述したように、IE8 は をサポートし:first-childているため、この場合、コードが機能しないのはセレクターの欠落が原因ではありません。CSS が機能しない理由は:first-child、背景に RGBA カラーを使用しているためです。IE8 は RGBA カラーをサポートしていません。

    このために利用できる唯一の解決策は、CSS3Pieと呼ばれる JS ライブラリです。これにより、RGBA カラー サポートを含むさまざまな CSS3 機能が IE6/7/8 に追加されます (限られた範囲ではありますが、すべてを実行するわけではありません)。

于 2013-03-22T16:10:14.170 に答える
1

前述のように、:last-child疑似クラスを使用することはできませんが.selected2 + .selected2、必要なものをターゲットにするなどのことができます。

于 2013-08-12T08:07:07.693 に答える