2 hallin me Hallin_Me 于 2016.09.14 10:50 提问

前端 ul li 兼容 ie的问题

近期做web项目遇到一些兼容性问题,ul li简单的效果实现 ,下图是在谷歌,火狐,safari各浏览器都很ok:
图片说明
代码如下css:
.service_list ul{
list-style: none;
}
.service_list ul li{
/*95*/
margin-left: 95px;
float: left;
width: 242px;
height: 282px;
border-radius: 10px;
background-color: #7292fa;
padding: 14px;
}
.service_list ul li:first-child{
margin-left: 0px;
background-color: #fde07d;
}


如下所示IE效果:
图片说明
图片说明

如何解决ie6问题???
请教!!!要把它想成ul里面的li是三条动态的数据!

2个回答

u013337963
u013337963   2016.09.14 10:58

IE6不支持border-radus,还有把first-child改成用class实现,解决兼容就是用最原始的普通的样式,不要用新出来的css属性,具体看你个人了

Hallin_Me
Hallin_Me 回复showbo: 恩,挺好的!thank you !
大约一年之前 回复
showbo
showbo 回复Hallin_Me: 动态数据你生成的时候判断是第一个加上样式不就行了,ie6不支持:first-child
大约一年之前 回复
Hallin_Me
Hallin_Me 如果采用class来处理的话,我的是动态数据,对于处理前面或者后面的li不好定位!
大约一年之前 回复
qq_29594393
qq_29594393   Ds   Rxr 2016.09.14 10:57

IE6双边距bug:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大。

  • 浮动ie产生的双倍距离(IE6双边距问题:在IE6下,如果对元素设置了浮动,同时又设置了margin-left或margin-right,margin值会加倍。)
    #box{ float:left; width:10px; margin:0 0 0 100px;}

    这种情况之下IE会产生20px的距离,解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

Hallin_Me
Hallin_Me 恩,谢谢!现在这个不是边距存在的问题,而是如何去定位最前或者最后的li来让margin-left为0px,或者另外的方法解决这个适配ie6.
大约一年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片