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

飘逸的风11年前 (2016-01-04)前端23870

 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

相关文章

JS版的in_array和is_array

写PHP代码是我们可以使用is_array()方法来检测一个变量是否是数组,使用in_array()来判断一个变量是否包含在一个数组中,那么在JS中我们该,如何来判断呢?   下面来分享...

jquery 事件方法总结

Dom: Attribute:属性 $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test.jpg",title:"te...

jQuery scrollUp - jQuery滚动到顶部插件

jQuery scrollUp - jQuery滚动到顶部插件

当网页内容过长,你浏览到底部需要回到顶部时,是不是希望“一键直达”呢?scrollUp 就是这样一款插件,它能够让用户滚动条滚动到一定的位置时(可设置),右下角出现“滚动到顶部”的按钮,点击后,页面就...

js 字符串操作函数集合

concat() – 将两个或多个字符的文本组合起来,返回一个新的字符串。  indexOf() – 返回字符串中一个子串第一处出现的索引。如果没有匹配项,返回 -1 。  c...

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

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

网页个性字体——迟到的中文 WebFont

网页个性字体——迟到的中文 WebFont

三年前,有一个设计师面试一位 Web 前端工程师,其中有一段这样的对话: “如果设计师希望用图片实现某个字体样式,而从技术的角度来说这样不合理,但设计师非常坚持,这时候你怎么办?” “我会给设计师...

发表评论

访客

看不清,换一张

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