CSS 伪类在IE8中样式无法生效
写了一个纯CSS的竖版流程样式,效果如下
起始12结束
使用:before生成左侧圆,首尾两头的li用:after生成竖条,其余都用border-left填补。
伪类绝对定位,首尾li :before做了位置微调。
但在IE8中出现了首尾li的:before失效情况(中间li则正常)
几次调整css不见成效.....css代码,比较丑....
.case-state>li{
position: relative;
display: block;
height: 40px;
line-height: 40px;
color: #b4e7bf;
font-size: 14px;
padding-left: 10px;
border-left: 5px solid #82d694;
}
.case-state>li:before
{
content: "";
position: absolute;
left: -7px;
top: 16px;
width: 9px;
height: 9px;
border-radius: 50%;
color: #82d694;
border: 2px solid #fff;
z-index: 2;
}
.case-state>li:first-child:before,
.case-state .ing:before,
.case-state .end:before
{
left: -2px;
}
.case-state>li:first-child:after{
content: "";
position: absolute;
left: 0;
top: 5px;
height: 35px;
width: 5px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
background: #82d694;
}
.case-state .ing,
.case-state>li:first-child,
.case-state .end{
border: 0;
padding-left: 15px;
}
.case-state .ing:after{
content: "";
position: absolute;
left: 0;
top: 0;
height: 35px;
width: 5px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
background: #82d694;
}
.case-state .end:after{
content: "";
position: absolute;
left: 0;
top: 0;
width: 5px;
height: 23px;
background: #82d694;
}
.case-detail table{
font-size: 22px;
line-height: 50px;
color: #506173;
}
.case-detail tr>td:first-child{
font-size: 18px;
color: #8c9cad;
}
.case-detail .tr-top td:first-child {
padding-top: 5px;
}
相关阅读:
是不是没法爬去qq群名称人数等信息?
python处理中文
Android-Studio 新建项目 Missing styles
Web 移动端 你们在开发移动页面的时候使用的默认字体是?欢迎小伙伴到此一游!
mac下使用supervisor的section setting问题
php取出数据库数据后,var_dump(),id字段为什么是字符串类型?
关于LNMP性能问题
如何将下面的注释改成yml?
求助Tornado/Cyclone RBAC 修饰符编写
开始学angularJs,每次都报错,有时候写的两个大括号也会直接在网页上显示
这个小动画怎么搞才能达到目的
什么原因才会导致 fs.readFile 不执行回调函数
轻量级前端框架,可以快速上手,有没有推荐?
python 'module' object has no attribute 'PROTOCOL_SSLv2'
对象不支持“ready”属性或方法
path.resolve(__dirname, 'src') 和 __dirname + 'src' 有什么区别?
PHP比较mysql里的Int数据
a tag download 属性制定下载文件名字的问题
Struts2下载浏览器没响应,求指教解决问题思路
wxPython怎么控制只能运行一个实例程序?