ie8css无效,CSS 伪类在IE8中样式无法生效

写了一个纯CSS的竖版流程样式，效果如下

起始
1
2
结束

使用：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;

}

ie8css无效,CSS 伪类在IE8中样式无法生效相关推荐

html中伪类的兼容性,css,ie8兼容性_CSS 伪类在IE8中样式无法生效，css,ie8兼容性,伪类 - phpStudy...
CSS 伪类在IE8中样式无法生效写了一个纯CSS的竖版流程样式,效果如下起始 1 2 结束使用:before生成左侧圆,首尾两头的li用:after生成竖条,其余都用border-left填补 ...
html input选中样式,CSS 伪类修改input选中样式的示例代码
注:该表引自W3School教程伪元素的分类及作用: 下面通过代码看下CSS 伪类修改input选中样式的示例代码,代码如下所示: 主要是用到了after伪类和字体符号. input{ -webki ...
HTML中的Postion定位问题及盒子模型、CSS伪类
一.Postion定位问题 1.相对定位(postion:realtive) 图像可以根据原有位置移动,但是原先图像的位置不会改变,哪怕出现空白部分.(占位置) 2.绝对定位(postion:abso ...
html中伪类的兼容性,关于css伪类的一些兼容性测试
测试环境:xp ,ie7~8 chrome. link 伪类 :(:link,:visited) 这个是链接专用动态伪类 :(:hover,:active,:focus) html> a: ...
CSS 伪类选择器：如何使用 CSS3 伪类
CSS 伪类选择器:如何使用 CSS3 伪类 CSS3 是个好东西,但也很容易被她的变形(transform)和动画(其中许多特性因浏览器厂商而异)特性所迷惑,因而忘了那些已经被添加到标准规范中的最为 ...
css伪类元素加在元素前,CSS伪类:before在元素之前 :after 在元素之后实例讲解
本教程简单的介绍一下关于CSS伪类:before, :after详解,有需要了解的朋友可以参考一下下. :before 伪元素在元素之前添加内容这个伪元素允许创作人员在元素内容的最前面插入生成内容. ...
css修改select选择框option被选中的背景颜色_这 16 个 CSS 伪类，助你提升布局效率！
作者:Chidume Nnamdi 译者:前端小智来源:mediuum 大家都说简历没项目写,我就帮大家找了一个项目,还附赠[搭建教程]. css 伪类是用于向某些选择器添加特殊的效果,是动态的,指 ...
2天驾驭div+css_老婆竟然只知道几个css伪类，不行得惩罚她了
最近在教我老婆学习前端,她说想要学习前端,自己在家赚点外快,自己赚点家用.我也拗不过她,而且其实我也挺佩服的.所以就教她了.最近我想考一考她对css中伪类的了解,所以就问了她了解css多少个伪类,伪类 ...
CSS 伪类(Pseudo-classes)
CSS伪类是用来添加一些选择器的特殊效果. 语法伪类的语法: selector:pseudo-class {property:value;} CSS类也可以使用伪类: selector.class: ...
CSS 伪类选择器详解：为网页添加交互与美感
介绍 CSS 伪类选择器是一种非常有用的 CSS 选择器,它能够根据元素的状态.位置或其他属性来选择元素并应用样式.伪类选择器的语法为 :pseudo-class,其中 pseudo-class 是一 ...

ie8css无效,CSS 伪类在IE8中样式无法生效

ie8css无效,CSS 伪类在IE8中样式无法生效相关推荐

最新文章

热门文章