欢迎访问 生活随笔!

生活随笔

当前位置: 首页 > 前端技术 > CSS >内容正文

CSS

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

发布时间:2023/12/18 CSS 49 豆豆
生活随笔 收集整理的这篇文章主要介绍了 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中样式无法生效的全部内容,希望文章能够帮你解决所遇到的问题。

    如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。