解决nth-child（n）属性在IE8浏览器中兼容性问题

最新推荐文章于 2021-08-04 00:04:43 发布
原创 最新推荐文章于 2021-08-04 00:04:43 发布 · 5.6k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一个在IE8浏览器中解决nth-child选择器兼容性问题的方法。通过使用级联选择器（如.level1>span+span）替代原本的:nth-child(2)选择器，成功解决了在IE8中的兼容性问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

因为在项目中用到了nth-child（n）属性，如下所示

.level1 span:nth-child(2) {
    margin-left: 24px !important;
}
而该属性却在IE8浏览器中出现兼容性问题，后面参考相关资料得知，可以使用以下方式处理在IE8中兼容性 

.level1>span + span {
     margin-left: 24px !important;
}
参考资料地址：http://blog.abouthalf.com/development/poor-mans-nth-child-selector-for-ie-7-and-8/

ie8兼容nth-child
kerryqpw的博客
03-30 452
ie8兼容nth-child IE8 不支持很多新特效，网站首页图文列表出现错位问题，原因是 IE8 不支持 CSS3 :nth-child() 选择器引起 最佳解决方法，通过jqery解决： jQuery:nth-child()选择器的使用方法和 CSS3 的:nth-child()没什么两样，兼容性不必担心。 :nth-child(odd)用于匹配奇数子元素 ...
nth-child（n）的IE8兼容问题
艾斯博弈
01-25 9906
写作背景 今天有个列表中第一行边框有特殊样式，第二个要求没有，其他的要求有边框 经常用：first-child 但是第二个确不是second-child 而是用css3的nth-child（n）但是有个兼容问题就查了一下资料，如下 说明demo /* standard nth */ ul.menu li:nth-child(3) { /* styles for the 3rd
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
11-21
一、代码 <style> ul{list-style: none} div ul li{width:100px;height:30px;border:#eee 1px solid;float:left;} div ul li:nth-child(1){background:#f00;} div ul li:nth-child(3){background:#ccc;} </style> <div> <ul> <li>11</li> <li>22</li> <li>33</li> </ul> </div> 二、预览效果 如上图
解决IE8下CSS3选择器 ：nth-child() 不兼容的问题
热门推荐
音韵者天
05-09 2万+
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
nth-child（n）伪类兼容ie8
qq_42852004的博客
05-30 341
:nth-child(n)不兼容ie8 实例： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>伪类选择器兼容IE8</title> <style type="text/css"> //非IE8情況下 ul>li:...
html中padding在ie8兼容性,解决nth-child（n）属性在IE8浏览器中兼容性有关问题
weixin_28982257的博客
06-28 325
【前言】学生提问：nth-child(n)属性在IE8浏览器失效方案？【案例】在项目中经常用到nth-child(n)属性，如下所示demo测试*{margin: 0;padding: 0}.parent{width: 600px;height: 300px;border: 1px solid red;margin: auto;}.parent div{display: inline-block;...
css :nth-child与:nth-of-type之小解
09-25
需要注意的是，这两个选择器的浏览器兼容性问题。`:nth-child()`和`:nth-of-type()`在现代浏览器（如Safari 3.1+、IE9+、Firefox 3.5+、Opera 9.5+、Chrome 2+）中已经得到广泛支持。然而，对于老旧浏览器，可能需要...
td:nth-child(1)和td:first-child的区别
最新发布
03-13
用户使用时可以根据习惯选择，但需要注意浏览器兼容性，不过现代浏览器应该没问题。 需要进一步确认是否有特殊情况，比如在动态生成的表格中，或者嵌套结构中是否有差异。但根据CSS标准，它们应该是等效的。因此，...
IE8 的兼容性问题总结
08-11
标题中的“IE8 的兼容性问题总结”表明了本文将主要讨论在开发Web应用时，针对Internet Explorer 8（简称IE8）浏览器所遇到的兼容性挑战。在Web开发领域，尤其是在IE8这样的旧版浏览器上，由于其对现代Web标准支持的...
解决ie8 css :nth-child(3n) 不兼容问题
时代
07-08 7674
个人是用jquery 做的 在css中 一般这样写 .css li:nth-child(3n){     width:300px; } 方法一：使用 + 来硬干nth-child() 遇到IE7、IE8的时候可以这样写： .css >li+li+li{     width:300px; } 或是这样 .css >first-child + li + l
nth-child(n)后代选择器IE8不兼容问题
weixin_44757915的博客
10-15 335
IE8不兼容div:nth-child(n)后代选择器 使用jQuery解决方案: if (navigator.appName === 'Microsoft Internet Explorer') { //判断是否是IE浏览器 if(navigator.userAgent.match(/Trident/i)&&navigator.userAgent.match(/MSIE 8.0...
ie8兼容css3的办法,IE8下CSS3选择器nth-child() 不兼容问题的解决方法
weixin_35772420的博客
08-04 469
一、代码ul{list-style: none}div ul li{width:100px;height:30px;border:#eee 1px solid;float:left;}div ul li:nth-child(1){background:#f00;}div ul li:nth-child(3){background:#ccc;}112233二、预览效果如上图，ie9及以上背景色能显示...
IE8兼容:nth-child方法
weixin_43121104的博客
09-03 1308
没解决之前 解决方法 直接用jquery获取:nth-child()选择器 这里是结果
table中nth-child()兼容IE8以及8以下的版本
涂涂
08-29 1396
所有主流浏览器均支持 :nth-child() 选择器，除了 IE8 及更早的版本 .list li:nth-child(4n){ margin-right:0; } 这样直接写只有在支持CSS3的浏览器中才可正常显示。  $(document).ready(function(){         $(".list li:nth-child(4n)").css("margin-righ
last-child兼容至IE8
沉着前进
10-09 8482
使用方法 jQuery :nth-child() 选择器的使用方法和 CSS3 的:nth-child()没什么两样。 关于 CSS3 :nth-child() 选择器 拽这里：http://www.exiang2.com/web/513.html :nth-child(odd)用于匹配奇数子元素 :nth-child(even)用于匹配偶数子元素
css伪类选择器及其兼容性
web_xyk的专栏
07-08 3819
常用的几个选择子元素的伪类选择器： 1. :first-child  (兼容性：对于 IE8 及更早版本的浏览器中的 :first-child，必须声明 。) 匹配选中元素的第一个元素，如图 2. :last-child (兼容性:ie9以下不支持) 匹配选中元素的最后一个元素，如图 3. :nth-child(n) (兼容性:ie9以下不支持)
IE8兼容问题
weixin_34413103的博客
10-18 166
最近做的网站，需要兼容IE8，在这里记录一下，碰到的问题，方便以后查看补充 1.CSS选择器nth-child 不兼容 ul li:nth-child(2){ background-image: url(../img/2.jpg); background-size: cover; } IE8不兼容 这种写法 在网上百度了一下 兼容写法 戳这里 可...
H5中nth-child(n)详解
weixin_44079801的博客
06-26 2024
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>nth-child(n)</title> <style> /* n 可以是关键词。将
CSS3:nth-child(n)与nth-child(2n+1)中n的区别。
xiongqiangwin1314的专栏
07-26 1万+
索引为0，为父元素ul的第一个元素。 索引为1，为父元素ul的第二个元素。 索引为2，为父元素ul的第三个元素。 索引为3，为父元素ul的第四个元素。 索引为4，为父元素ul的第五个元素。 索引为5，为父元素ul的第六个元素。 索引为6，为父元素ul的第七个元素。 索引为7，为父元素ul的第八个元素。 索引为8，为父元素ul的第九个元素。 索引
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值