1. 程式人生 > >解決ie8 css :nth-child(3n) 不相容問題

解決ie8 css :nth-child(3n) 不相容問題

個人是用jquery 做的

在css中 一般這樣寫

.css li:nth-child(3n){

    width:300px;

}

方法一:使用 + 來硬幹nth-child()

遇到IE7、IE8的時候可以這樣寫

.css >li+li+li{

    width:300px;

}

或是這樣

.css >first-child + li + li{

    width:300px;

}

方法二:使用JQuery解決IE8不支援CSS3的nth-child()問題

jQuery :nth-child() 選擇器的使用方法和 CSS3 的:nth-child()沒什麼兩樣,相容性不必擔心。

  • :nth-child(odd)用於匹配奇數子元素

  • :nth-child(even)用於匹配偶數子元素

  • :nth-child(n)用於匹配第n個元素

  • :nth-child(an)用於匹配倍數為a的元素,如3n、5n…

  • 可以是一個公式,如:nth-child(3n+1)匹配第1、第4、第7…個元素

  • :nth-child(-n+3)匹配前3個元素

  • :nth-child(-3n+8)匹配第8、第5、第2個元素

判斷是否為 IE8 瀏覽器,然後執行程式碼,例項: