6

次のコードがあります。

ul.myList li{
     border-right: 1px dotted #000;
}

ただし、最後の要素では、私が取り組んでいるデザインでは、最後のアイテムが区切りとして境界線を必要としないことを指示しているため、その境界線を削除する必要があります。

したがって、リストの最後の子をターゲットにする必要があるため、css 内に追加しました

ul.myList li:last-child{
     border-right: none;
}

ご存知のように、これは Firefox、Safari、および Chrome で正常に動作します。

問題は、Internet Explorer 6 から 8 でページを表示するときに発生します。

4

4 に答える 4

11

それで、いくつか掘り下げた後、私は答えを見つけました：

ブラウザが IE<8 の場合、次のようにスタイルシートを指定します。

<!--[if lt IE 8]>
<link rel="stylesheet" href="css/ie_all.css" type="text/css" />
<![endif]-->

また、IE スタイルシート内で次のルールを指定します。

ul.myList li{
     border-right: expression(this.nextSibling==null?'none':'inherit');
}

式は、nextSiblingその後に要素があるかどうかを確認し、ある場合はデフォルトのスタイルシートで指定されたルールを継承し、そうでない場合は新しいルールを適用します。

詳細はこちら

于 2010-09-24T11:15:12.470 に答える
2

IE8< は、この疑似セレクターをサポートしていません。サポートされているすべての機能については、 MSDN の記事を確認してください:)

この jQuery ソリューションを見て、IE で疑似セレクターを有効にするか、IE のままにしておくことができます。

于 2010-09-24T11:12:01.933 に答える
2

バージョン 9 (まだ開発中) より前の Internet Explorer は:last-childセレクターをまったくサポートしていないため、残念ながら、私の最善の解決策は、リストの最後の要素にクラスまたは ID を設定し、それを選択しようとすることです。

もちろん、右の境界線を IE に残してもレイアウトが完全に壊れない場合は、IE がレンダリングを少しだけ台無しにすることを気にしないのであれば、コードをそのままにしておくことをお勧めします。

于 2010-09-24T11:12:57.597 に答える
1

これは jQuery を使用して行うことができます。したがって、CSS に依存する代わりに。jQuery セレクターを使用して、最後の要素のプロパティを設定します。あなたの質問にタグを付けていないことを理解しています。

jQuery('ul.myList li:last-child').css("Key","value");
于 2010-09-24T11:12:52.537 に答える