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

飘逸的风10年前 (2016-01-04)前端23726

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

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

一般这样写:

1.png

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

2.png

或这样:

3.png


参考资料:Poor man’s nth-child selector for IE 7 and 8


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


4.png

相关文章

jQuery 滚动鼠标中键图片自动改变大小(统一控制)

今天维护一个项目,需要对内容里的图片通过图片中间控制大小。由于是以前完成的,客户之前也没有提出要求,所以对已经添加后的数据没办法在一个个地在图片上加函数。网上查找了一下控制中键的资料,终于找到解决办法...

jquery简单代码实现复选框多选、单选、全不选功能,很实用

<html> <head>  <script type="text/javascript" src="https://code.jquery.com/jqu...

jQuery自适应宽度导航插件Horizo​​ntalNav

jQuery自适应宽度导航插件Horizo​​ntalNav

Horizo​​ntalNav 是一个 jQuery 导航插件,能够自适应容器的宽度。如果你曾经在一个项目中创建过这种效果,你就会知道,这是很难处理的。但这个插件很容易,并且支持 IE6、IE7。...

js 数组操作集合

注意:以下是按操作来分类的,有的方法有多个用途,就有重复 1、数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Arra...

js控制在网页中禁用右键和禁止另存为的代码

禁止网页右击,选择,最简单的两句代码: <script type="text/javascript"> <!-- document.oncontextmenu=n...

jQuery动态改变图片显示大小(完美兼容全部)

当我们要显示后台传过来若干个尺寸不一的图片时,为了保证图片大小的一致性及比例的协调,需要动态改变图片显示尺寸。通过搜索,我们可以从网上找到实现此功能的jQuery代码如下。这段代码可以使图片的大小保持...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。