代码笔记

解决IE8及以下版本不支持CSS3的nth-child()的写法

阅读

 IE8 不支持很多新特效,网站首页图文列表出现错位问题,原因是 IE8 不支持 CSS3 :nth-child() 选择器引起的,关于对此问题的解决办法,有如下两种解决方法(部分内容来源于网络):


方法一:使用 + 来硬干nth-child()

CSS3通常我们这样写:

ul>li:nth-child(3){
width:10%
}

遇到IE7、IE8的时候这样干:

ul>li + li + li{
width:10%
}

或者这样:

ul>li:first-child + li + li{
width:10%
}



方法二:使用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 浏览器,然后执行代码,实例:

if($.browser.msie && parseInt($.browser.version) == 8){
  //需要兼容的代码写在这里就可以了
}




推荐阅读

IE矩阵滤镜Matrix旋转与缩
IE矩阵滤镜Matrix旋转与...
dede重置栏目ID和文章ID
dede重置栏目ID和文章...
IE8兼容rgba方法
IE8兼容rgba方法
WEB字体格式及几种在线格
WEB字体格式及几种在线...