0

ナビゲーションメニューのあるブートストラップ付きのWordpressテーマがあります。最後のメニュー項目では、：last-childを使用して別のスタイルを適用したいと思います。

これがCSSであり、多くのスタイルシートの1つにある他のスタイルの中でも次のとおりです。

#main-nav ul.menu li:last-child a:hover {
   /* Pink Exam Timetable for Phil */
   border-bottom-color: #F501FF;
   background-color: #4B67A1;
}

ChromeとFirefoxではすべてが正常に機能し（いつものように）、IE9と10のプレビュー（Win 7）では「ホバー」は正常に機能しますが、奇妙な理由で「最後の子」はIE9と10では機能しません。 10（3台のコンピューターでテスト済み）。

キャッシュをクリアしてすべての種類を試しましたが、機能させることができません。

4

2 に答える 2

0

これでIE9に問題はありません。

<ul>
  <li>Text</li>
  <li><a>Text</a></li>
</ul>

li:last-child a:hover {
   /* Pink Exam Timetable for Phil */
   border-bottom-color: #F501FF;
   background-color: #4B67A1;
}

このデモを試す

問題はマークアップにある可能性があります。

于 2013-01-10T16:19:06.533 に答える
-1

NOTE: I am talking about Cross Browsers (not just IE9...)

last-child is not 100% cross browser friendly yet:

Internet Explorer versions < 9, and Safari < 3.2 definitely don't support it, although Internet Explorer 7 and Safari 3.2 do support :first-child, curiously.

....if you want to have a pseudo that works 100% the first:child would work:

You can work it out to have it reverse so the last would work for your desire (first:child method)

or go manual:

for your example you might have to do a class define like this:

CSS:

#main-nav ul.menu li .last a:hover {
   /* Pink Exam Timetable for Phil */
   border-bottom-color: #F501FF;
   background-color: #4B67A1;
}

your html

    <ul>
    <li><a href="#">sdfds</a></li>
    <li><a href="#">sdfds</a></li>
    <li class="last"><a href="#">dfgdrg</a></li>
    </ul>
于 2013-01-10T16:20:19.560 に答える