html中伪类的兼容性,css,ie8兼容性_CSS 伪类在IE8中样式无法生效,css,ie8兼容性,伪类 - phpStudy...
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;
}
相关阅读:
是不是没法爬去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怎么控制只能运行一个实例程序?
html中伪类的兼容性,css,ie8兼容性_CSS 伪类在IE8中样式无法生效,css,ie8兼容性,伪类 - phpStudy...相关推荐
- html打印样式不生效,css – 打印样式:如何确保图像不跨越分页符
当编写打印样式表时,是否有一种方法可以确保图像始终只在单个页面上,而不是跨多个页面.图片比页面小得多,但是基于文档流,他们最终在页面的底部并得到拆分.我看到的行为的一个例子如下: Page 1 | | ...
- CSS样式内联选择器选择器优先级伪类顺序
日期:2020-10-02 作者:19届WY 标签:CSS选择器相关内容 一.html简介&CSS简介 == html简介 : 结构:决定网页的结构及内容,即"显示哪些内容" ...
- css-day01笔记-CSS初识、基础选择器、文字和文本样式
typora-copy-images-to: media 第01阶段.web基础:css-day01笔记-CSS初识.基础选择器.文字和文本样式 一.CSS层叠样式表 学习目标 理解 css的目的作用 ...
- css中双冒号after,::before和:after中单冒号和双冒号的区别是什么,这两个伪元素有什么作用?...
发现这道题和后面的题目有点类似,都是讲伪元素 :before 和 :after ,直接看这道题的解释吧,同样可以回答这个问题. [css] 第19天 css的属性content有什么作用呢?有哪些场景 ...
- CSS知识总结之设计模式(持续学习中)
OOCSS 参考:http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss ...
- css grid随页面大小_前端开发中各种设置CSS间距的优点缺点及实例「实践」
前言 如果两个或多个元素很接近,那么用户就会认为它们以某种方式属于彼此.当对多个设计元素进行分组时,用户可以根据它们之间的空间大小来决定它们之间的关系.没有间距,用户将很难浏览页面并知道哪些内容相关而 ...
- php中css样式两端对齐,CSS两端对齐
前面的话 两端对齐在导航Nav的制作中非常常用.本文将详细介绍CSS两端对齐的3种实现方式 flex 弹性盒模型flex作为强大的弹性布局方式,可以hold住大部分的布局效果,当然也包括两端对齐.可以 ...
- CSS过滤器无法生效,IE8不透明度/过滤器css样式不起作用(IE8 opacity/filter css style not working)...
IE8不透明度/过滤器css样式不起作用(IE8 opacity/filter css style not working) 我有以下风格: .LinkActionButtonDisabled { c ...
- html class和id,css教程之样式表的基本语法(二) class(类)和id的一个小实例
class(类)和id的一个小实例 在上一节中我们了解了如何为特定的标签定义样式,例如我们利用 "h1{font-size: 12px;}"将页面内所有的标题1的字体大小改为了12 ...
最新文章
- P2015 二叉苹果树
- 如何选择最佳技术来加速文件传输!
- 其实吧,微信就是已经用电脑上线,第二天消息还是从手机上重新接收
- php——验证身份证是否合法的函数
- 360互联网技术训练营第18期——AIOps落地实践探索 火热报名中!
- 使用邻接矩阵实现有向图最短路径Dijkstra算法
- sys_guid() mysql写法_PostgreSQL Oracle 兼容性之 - sys_guid()
- 百度开源的依存句法分析系统
- 黑苹果睡眠问题(仅适用自己的配置)
- spring-boot-starter-data-elasticsearch 中测试查询语句报错failed to map source
- 81章 老子1章到_《道德经》81章全文,建议全文背诵,终身体悟
- 天池比赛——docker初步尝试
- 在Linux中安装mysql后遇到错误20008解决方案
- PHP对接企业微信审批回调
- WIN10 + Tensorflow1.12 + Cmake编译 + Bazel编译
- 凝固永恒瞬间的艺术 纪实摄影到底怎么拍
- MEF编程-最为简单的Export/Import
- java调用迅雷_java jna调用迅雷接口下载
- excel 批量增加超链接
- 什么叫做CHINANET?