ie8 伪元素兼容性问题，请教大神们怎么解决？？

Web 开发 > HTML(CSS)
收藏 回复
[问题点数：50分，结帖人qq_37329843]
更多帖子
私信 空间 博客
webdesignerx
等级
本版专家分：35
结帖率 50%
http://218.84.206.87/index.php?s=/Course/Index/courseType.html
按钮是用的css伪元素写的，用ie8打开掉下去了。。

各路神仙请求帮忙
只看楼主 引用 举报 楼主 收起
展开阅读全文
更多帖子
私信 空间 博客
Mafia
等级
本版专家分：3810




<style type="text/css">

.btn{

    height: 22px;

    width: 46px;

    text-align: center;

    line-height: 22px;

    color: rgb(255, 255, 255);

    position: relative;

    font-size: 12px;

    font-family: 微软雅黑;

    padding: 0px 5px;

    background: rgb(169, 205, 249);

	border-radius:8px;

}

</style>

<div class="btn">去报名</div> 



不用伪类，用CSS3，不支持的浏览器就平角。

或者用图片背景。
只看TA 引用 举报 #1得分 20
更多帖子
私信 空间 博客
webdesignerx
等级
本版专家分：35
引用 1 楼 webyellow 的回复:




<style type="text/css">

.btn{

    height: 22px;

    width: 46px;

    text-align: center;

    line-height: 22px;

    color: rgb(255, 255, 255);

    position: relative;

    font-size: 12px;

    font-family: 微软雅黑;

    padding: 0px 5px;

    background: rgb(169, 205, 249);

	border-radius:8px;

}

</style>

<div class="btn">去报名</div> 



不用伪类，用CSS3，不支持的浏览器就平角。

或者用图片背景。


看我发的网址了啊，我是用图片代替的
只看TA 引用 举报 #2得分 0
更多帖子
私信 空间 博客
天际的海浪
等级
本版专家分：163975
勋章
Blank
签到王者 累计签到获取，不积跬步，无以至千里，继续坚持！
Blank
GitHub 绑定GitHub第三方账户获取
Blank
进士 2019年总版新获得的技术专家分排名前十
2018年总版新获得的技术专家分排名前十
2017年 总版技术专家分年内排行榜第七
Blank
银牌 2019年1月 总版技术专家分月排行榜第二 


<style type="text/css">

#butt {

	position: relative;

	width: 100px;

	height: 30px;

	background-color: #66f;

	margin: 20px;

}

#butt:after {

	content: "";

	position: absolute;

	left: 100%;

	top: 0;

	width: 10px;

	height: 30px;

	background-color: #f99;

}

#butt:before {

	content: "";

	position: absolute;

	right: 100%;

	top: 0;

	width: 10px;

	height: 30px;

	background-color: #f00;

}

</style>

<div id="butt"></div>
只看TA 引用 举报 #3得分 30
更多帖子
私信 空间 博客
webdesignerx
等级
本版专家分：35
引用 3 楼 jslang 的回复:


<style type="text/css">

#butt {

	position: relative;

	width: 100px;

	height: 30px;

	background-color: #66f;

	margin: 20px;

}

#butt:after {

	content: "";

	position: absolute;

	left: 100%;

	top: 0;

	width: 10px;

	height: 30px;

	background-color: #f99;

}

#butt:before {

	content: "";

	position: absolute;

	right: 100%;

	top: 0;

	width: 10px;

	height: 30px;

	background-color: #f00;

}

</style>

<div id="butt"></div>




.putton-org:before {

    content: "";

    width: 8px;

    height: 22px;

    position: absolute;

    left: -8px;

    background-image: url(../images/putton-org.png);

    background-position: 0px 0px;

}

.putton-blue:after {

    content: "";

    width: 8px;

    height: 22px;

    position: absolute;

    right: -8px;

    background-image: url(../images/putton.png);

    background-position: -12px 0;

}
只看TA 引用 举报 #4得分 0
更多帖子
私信 空间 博客
webdesignerx
等级
本版专家分：35
有没有大神帮我在ie下看一下网址的问题
只看TA 引用 举报 #5得分 0
更多帖子
私信 空间 博客
Mafia
等级
本版专家分：3810
用IE8看你页面是好的。


如果还有问题，
1，写CSS HACK。
2，看我说的，用整个整个图片做背景，反正也是三个字。
3，别用伪类，固定宽度用display:block;float:left;，清理浮动。不固定宽度用display:inline-block。
只看TA 引用 举报 #6得分 0
更多帖子
私信 空间 博客
webdesignerx
等级
本版专家分：35
引用 6 楼 webyellow 的回复:
用IE8看你页面是好的。


如果还有问题，
1，写CSS HACK。
2，看我说的，用整个整个图片做背景，反正也是三个字。
3，别用伪类，固定宽度用display:block;float:left;，清理浮动。不固定宽度用display:inline-block。


我这个数据是动态加载的，跟这个有关系吗？？加入我直接写静态的html就没有问题
只看TA 引用 举报 #7得分 0
收起
收藏 回复
webdesignerx

等级：

关注 私信 TA的帖子
2019最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)

近期总结一一些面试题 都是企业的面试题笔记题 感觉薪资10k下的都会出笔试题 特别高的薪资都是直接技术面试或者是 现场编程 总结很多人的面试题，后期会对于单个知识点再说笔记详细讲解。 ...

伪元素（3）-解决IE6/IE7/IE8不支持before,after问题

解决IE6/IE7/IE8不支持before,after问题

【css】兼容IE8及IE8以下伪类选择器

但有个麻烦，IE8及IE8以下对很多伪类选择器并不兼容。这六个伪类选择器是比较长用到的：这时会发现，IE9对这些伪类选择器都兼容。IE8、IE7除了的 :first-child 是兼容的，其他五个都不兼容。兼容：&lt;body&...

2020年前端面试题及答案

4、前端安全性问题 5、前端跨域问题 6、前端数据加密 7、前端http相关问题 8、*前端基础知识点面试题 9、前端技术栈问题 前言 由于新冠肺炎疫情，现在成天呆在家里，加上也要准备面试，就在...

css3和css伪类和伪元素区别与兼容性

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。 伪元素由双冒号和伪元素名称组成。双冒号是在当前规范中引入的，用于区分伪类和伪元素。但是伪类兼容现存样式，浏览器需要同时支持旧的伪类，比如:first-...

什么是伪类？什么是伪元素？区别是什么？

什么是伪类： ...什么是伪元素：## 标题 ## p{ border:1px red solid; } p:before{content: “hey “; position: relative; left: 20px; } p:after{ content: “you are handsome!”; position:...

主流浏览器兼容性问题与解决方案

主流浏览器兼容性问题与解决方案 　所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站...

如何解决CSS伪类hover在IE8中失效的问题？

解决方案 正确书写DOCTYPE。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 参考 http:

2019年Java面试题基础系列228道（4），快看看哪些你还不会？

2019年Java面试题基础系列228道 第一篇更新1~20题的答案解析 2019年Java面试题基础系列228道（1），快看看哪些你还不会？ 第二篇更新21~50题答案解析 2019年Java面试题基础系列228道（2），查漏补缺！...

最全整理浏览器兼容性问题与解决方案

常见浏览器兼容性问题与解决方案　所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站...

经典蝙蝠算法MATLAB实现

为什么会有这么多基于群智能的算法，蚁群、粒子群、鱼群、烟花、炮竹、猪群、牛群、马群、羊群、猴群、鸡群。。。算法。？？？？？？...蝙蝠算法( BA) 是 Yang 教授于 2010 年基于群体智能提出的启发式搜索算法,是一种...

浏览器兼容性问题（IE9+;PC）

1. 默认margin、padding不一致 * {margin: 0;padding: 0;} 2. css3的animation IE9不支持 ... IE9不支持；IE10部分支持，使用display: ms-flexbox flexbugs@github ... IE10下，justify-content对...

前端面试题

前端面试题汇总 ... 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? 21 ... 21 Quirks模式是什么？它和Standards模式有什么区别 21 div+css的布局较table布局有什么优点？...img的alt与title有何异同？...

前端面试锦集

前端面试锦集

一行代码解决各种IE兼容问题

一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10 前端面试秘籍,欢迎star! 在网站开发中不免因为各种兼容问题苦恼，针对兼容问题，其实IE给出了解决方案Google也给出了解决方案 百度也应用了这种方案去解决IE的...

浏览器兼容性问题和解决方案

    所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。 常见的浏览器内核     四种内核： Trident、Gecko、Blink、Webkit 类型 内核 ...

浦发银行 信息科技岗 大数据方向 面经

浦发银行总行（上海）大数据岗8月6号面经 一、综合面 二、机试 三、专业面试 浦发面经 即兴演讲 上机测试 结构化面试 浦发银行大数据创新岗上海打卡 第一部分 综合面试 第二部分 专业面试 第三部分 上机考试...

ie6,ie7常见兼容性问题总结

其实浏览器的不兼容，我们往往是各个浏览器对于一些标准的定义不一致导致的，因此，我们可以进行一些初始化，很多问题都很轻松解决。 下面是14条特殊情况仅供参考： 1. 文字本身的大小不兼容。同样是font-size:14...

css伪类选择器及其兼容性

1. :first-child (兼容性：对于 IE8 及更早版本的浏览器中的 :first-child，必须声明 。) 匹配选中元素的第一个元素，如图 2. :last-child (兼容性:ie9以下不支持) 匹配选中元素的最后一个元素，如图 3. :...

CSS伪类与伪元素

为什么要引入伪类与伪元素？ css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或是列表中的第一个元素，又或者是鼠标...

常见的浏览器css和js兼容性问题汇总

无论是在工作或者面试中，总会遇到关于浏览器兼容性的问题，往往会感到一头雾水不知从何说起，于是我结合一些工作经验及从网上搜集的一些资料对此做了一些汇总，希望对从事前端工作的朋友们起到一些帮助。...

遗传算法原理及算法实例

遗传算法通常是利用生物启发算子，如变异、交叉和选择来生成高质量的优化和搜索问题的解决方案。 借鉴生物进化理论，遗传算法将问题模拟成一个生物进化过程，通过复制、交叉、突变等操作产生下一代的解，并逐步淘汰...

通过getElementsByClassName获取元素集合的兼容性问题解决方案

通过getElementsByClassName获取元素集合的兼容性问题解决方案 方案一：使用方案一后，通过document.getElementsByClassName（）函数来获取类名对应的元素集合 if(!document.getElementsByClassName){ //能进来...

伪类和伪元素的区别

文章目录前言伪类伪元素区别 前言 在CSS1和CSS2中对伪类和伪元素没有做出很明显的区别定义，而二者在语法是一样的，都是以:开头，这造成很多人会将某些伪元素误认为是伪类，如:before，:after；而在CSS3给出的定义中...

after，before兼容性问题

伪元素after定义的实线不显示。见下图rem引用如下： // 动态设置html的rem(最好放在这里，不然样式加载出来没进行单位换算，整体样式会紧凑在一起。) document.documentElement.style.fontSize = document....

伪代码

伪代码声明：引用请注明出处http://blog.csdn.net/lg1259156776/说明：从来没有认真的想过学习一下伪代码，因为大部分只是在阅读，能够看懂也就没有深入了解一下如何编写伪代码，下面所进行的总结就是关于如何使用伪...

IE67不兼容before和after伪类的最佳解决办法

IE67不兼容before和after伪类，在需要兼容IE67的页面时，可以通过使用img标签和png雪碧图固定定位的方式来解决，通过js来处理IE6下PNG不透明的问题，这样就可以不用通过JS处理before和after伪类

移动端常见的一些兼容性问题

1、安卓浏览器看背景图片，有些设备会模糊。 用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？ 经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会...

茅台、鞋子、手机、抢购、软件，抢购秒杀

最近各大电商平台不断持续放货，京东，天猫，苏宁，网易等，还有新加入的大军，酒仙网，，国美，华润万家和主播等等……给平台带去了巨大流量。 看到很多小伙伴都撸货撸到手发软，发财发到腿抽筋。一瓶几百+，你算算，这能赚多少钱。是不是不想上班的那种，上班一天才两三百，什么时候才能买到房子。 今天带来一个福利。那就是抢购软件，很实用。朋友圈好多都在用这个抢购。内有教程仔细阅读。最后祝每个伙伴都抢到 赚到

Visio_2016

visio_2016下载安装，亲测可用，不需要破解，而且无秘钥。简单方便实用

相关热词 c# 打印 等比缩放 c#弹出右键菜单 c# 系统托盘图标 c#结构体定义 c# 根据网络定位 c# 清除html标签 c# uwp最小化 c#和java的区别 64位转换 c# 十进制 c# 点击保存草稿的实现