寫了一個純CSS的豎版流程樣式，效果如下

起始

1

2

結束

使用：before生成左側圓，首尾兩頭的li用：after生成豎條，其余都用border-left填補。

偽類絕對定位，首尾li ：before做了位置微調(diào)。

但在IE8中出現(xiàn)了首尾li的:before失效情況(中間li則正常)

幾次調(diào)整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中样式无法生效的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。