html不支持ie7,解决IE6/IE7/IE8不支持before,after问题
对从事web开发的朋友来讲,低版本的永远是一个痛点,不支持最新技术(如css3,html5)。
在现在web开发中使用图标字体已经很广泛,如Font Awesome,Bootstrap等,字体图片主要是通过css选择器before,after结合content来实现,但是在低版本的IE6/IE7/IE8中并不支持,下面就来探讨一下如何解决IE6/IE7/IE8不支持before,after问题。
先来看一个例子
这里重点演示IE6中效果,因为只要IE6实现的效果,更高版本的IE一般都可以实现。
devdo
在chrome,firefox,opera中的显示结果为
在IE6中显示结果为
从上面的例子看出,IE6并不支持before、after,那么要如何让IE6支持呢,通常的方法是通过脚本来实现,jquery.pseudo.js就是用于解决IE6不支持before、after的一个方法。
使用方法
一、引入jquery,引用jquery.pseudo.js
二、修改css
在你需要使用的html标签中加入before,after属性。
如通常p:before{content: “before”;},要在p标签中加入{before: ‘before';after: “after”;},如不明白请看下面示例代码。
p:before,p {
content: "before";
before: 'before';
}
p:after,p {
content: "after";
after: "after";
}
devdo
在chrome,firefox,opera中的显示结果为
在IE6中显示结果为
在IE6中的before,after已经显示出来,但是其中before后的空格没有体现出来,这个你可以通过before: “before “;后面加个空格来处理。
现在IE6已经实现before,after已经实现效果,有些同学就要问了,那图标字体呢,如何实现。
我们就拿大名鼎鼎的font-awesome来举例。
一般情况你只需要把font-awesome的类插入css中即可实现,但是对IE6这种奇葩,我们要多走一步。
通过chrome,firefox等浏览器的审核元素功能,查找图标字体的content值,如下图。
我这里是微博图标,content值是”\f18a”,把需要使用的标签中加入before:”\f18a”,如下面i标签p i{before:”\f18a”;},全部示例看下面代码。
devdo
在chrome,firefox,opera中的显示结果为
在IE6中显示结果为
现在IE6的图标字体也实现了,更多功能等你发现。
下载jquery.pseudo.js
转载请注明:前端录»解决IE6/IE7/IE8不支持before,after问题
html不支持ie7,解决IE6/IE7/IE8不支持before,after问题相关推荐
- 解决IE6/IE7/IE8不支持before,after问题
对从事web开发的朋友来讲,低版本的 IE 永远是一个痛点,不支持最新技术(如css3,html5). 在现在web开发中使用图标字体已经很广泛,如Font Awesome,Bootstrap等,字体 ...
- 一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行
一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行 转载于:https://www.cnblogs.com/mabelstyle/p/3844739.html
- 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题...
解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题 在IE6,IE7下,子元素使用position:relative ...
- 伪元素(3)-解决IE6/IE7/IE8不支持before,after问题
第一种解决方式参考: http://www.wozhuye.com/index.php?m=content&c=index&a=show&catid=3&id=316 ...
- calc ie支持_让IE6/IE7/IE8支持CSS3属性的8种方法介绍
让IE6/IE7/IE8支持CSS3属性的8种方法介绍 发布时间:2013-09-23 10:43:06 作者:佚名 我要评论 IE浏览器暂不支持CSS3的一些属性.国外的工程师们,不安于此现 ...
- DIV CSS兼容性解决IE6/IE7/FF浏览器的通用方法完美兼容
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 ...
- 解决IE6、IE8 宽度兼容
一.!important 兼容ie6 因为ie7及其以上版本对!important的支持, 所以!important 方法就可以很好的用来做ie6的兼容了.(切记声明位置需要提前.) 例如: #rig ...
- bootstrap支持ie8 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
做一个在线系统,PC端也要做,但要兼容千恶的IE8[IE6 是万恶,打死我都不会管IE6],IE8 是我底线了md, 在IE8下 bottstrap 错乱,变形,不支持一些属性的问题,下面看了一篇 某 ...
- php7 css样式不支持,div错位/解决IE6、IE7、IE8样式不兼容问题_html/css_WEB-ITnose
放到 标签下,然后为div指定一个类: 然后CSS这样设计: #container{ min-width: 600px; width:expression(document.body.clientW ...
最新文章
- ContentObserver类的使用
- 解读 2018 之运维篇:我们离高效智能的运维还有多远
- 深入理解Lustre文件系统-第13篇 未来的工作
- torch yolov3梯度发散
- gdi 格式转换 vb_VB 程序设计举例
- UNIX再学习 -- 静态库与共享库
- Facebook 号称击败谷歌,推出最强聊天机器人
- finalshell连接失败解决方法_Windows 无法连接到SENS的解决方法
- 兼任华为云总裁 余承东能否再续“终端辉煌”
- AC日记——独木桥 洛谷 p1007
- 王不留,混迹基层八年穷屌丝,考研准备四个月,考上中国科技大学MBA,成为一家软件上市公司中层管理者(附备考攻略)
- Android简易本地音乐播放器,Android简易音乐播放器实现代码
- 【暑期每日一题】洛谷 P6437 [COCI2011-2012#6] JACK
- java se 64位_【JavaSERuntime(jre864位版)免费版下载】Java SE Runtime(jre8 64位版) 8.0-ZOL软件下载...
- 小马马说MapReduce算法案例(1):二度人脉好友推荐
- Marvell 88E1111PHY芯片简介
- 学习QT之图形视图实例#-飞舞的蝴蝶
- 【2019-CVPR-3D人体姿态估计】Weakly-Supervised Discovery of Geometry-Aware Representation for 3D HPE..
- 音量控制按钮有小红叉插头已从插孔拔出
- 《快速软件开发》读书心得
热门文章
- 工作314:uni-提交成功加入表单验证
- [js] 说说你对js对象生命周期的理解
- 工作165:混入调用的时候
- 前端学习(535):多列布局2
- 前端学习(489):文本格式化
- 前端学习(312):高度塌陷
- 第九十五期:Python帮你识破双11的套路
- 第二十一期:老大难的GC原理及调优,这全说清楚了
- CubeMx 生成的FreeRTOS 代码在ARM compiler6 编译__forceinline 报错的解决方法
- 上交大计算机复试机师难不难,本科复旦,考研上海交大复试第一,我感觉难度并不大...