为IE6-7间接支持:before和:after伪类
:before和:after我们经常会用到,特别是在做移动端页面时,利用它制作文字前后的ICON、图片的垂直居中之类的非常方便且代码简洁(当然,功能远比这些要多的多...)。
可是在PC端,由于现在还要考虑到IE6、7的兼容性问题,使用这俩小神器时心情还是会不由地变沉重些,有时还得借助额外的标签来实现,活生生地让其它现代浏览器浪费功能(老早遇到这情况总是会喊一声:SBIE!!),点击查看:before的浏览器支持情况
其实能让IE6、7支持(准确说是模拟):before、:after的方法会有很多种:
(1):额外添加标签(和没说一样~~哈哈);
(2):使用第三方插件,如jquery.pseudo.js;
(3):JS动态添加,如zxx的实现:http://www.zhangxinxu.com/wordpress/2012/11/before-after-use-web/;
(4):其它方法(又和没说一样~~MD)。
有一次在网上乱逛,无意间看到有人在CSS中利用expression()动态创建DOM,我突然有一种捡到50块钱的感觉~~~。抛开性能和规范性的问题不讲,这个expression()确实很适合来弥补IE6、7不支持:before和:after的问题,原理其实都一样,但重要的是:简单、易用。
.test {
/* 在.test中动态创建span标签,并插入到第一个子元素的位置 */
*zoom: expression(this.insertBefore(document.createElement("span"),this.firstChild));
}
在IE6、7中使用上面的样式后,你会神奇的发现,你的浏览器不一会儿就死掉了~~~ 对的,因为expression中的JS语句会不停地执行,Never stop the beat~~~哈哈,直到die,这时就要用一个方法来控制JS语句仅在expression第一次解析时执行,不用flag变量,请出runtimeStyle这个DOM属性,这个属性和currentStyle类似,顾名思义,是运行时的样式,是IE特有的(在Chrome和Firefox中访问它会返回undefined),我们添加一句this.runtimeStyle.zoom="1",将zoom值由原本的expression()设置为一个固定值(这里为1),即而使expression生命仅存在一次,这样便达到了仅在第一次执行expression中的JS代码时添加DOM的目的。
添加控制语句后:
.test {
/* 在.test中动态创建span标签,并插入到第一个子元素的位置 */
*zoom: expression(this.runtimeStyle.zoom="1",this.insertBefore(document.createElement("span"),this.firstChild));
}
这样.test中真的多出了一个span,且在第一个子元素的位置,但是如果要为这个span精确地定义css样式,我们还需要做一些工作,比如:为这个span添加一个class类名,可以这样:
.test {
/* 在.test中动态创建span标签,并插入到第一个子元素的位置 */
*zoom: expression(this.runtimeStyle.zoom="1",this.insertBefore(document.createElement("span"),this.firstChild).className="ie-before");
}
这样子,我们就可以通过.ie-before这个类名来实现样式定义啦:
.test:before,
.test .ie-before {
content: "";
display: inline-block;
backgrund: url("***.jpg");
}
模拟:after的方法一样,区别只是添加DOM的方式,:before是向前添加,:after是向后添加:
.test {
/* 在.test最后一个元素后动态创建span标签 */
*zoom: expression(this.runtimeStyle.zoom="1",this.appendChild(document.createElement("span")).className="ie-after");
}
.test:after,
.test .ie-after{
content: "";
display: inline-block;
backgrund: url("***.jpg");
}
但是有一个问题,:before和:after可以使用content实现与标签元素属性的绑定,比如:
<div class="test" title="你好">吗?</div>
<div class="test" title="我好">吗?</div>
<div class="test" title="大家都好">吗?</div>
.test:before {
content: attr(title);
color: red;
}
上面的结构在IE8+、FF、Chrome中是可以达到你所要的结果的,但在IE6、7下呢?我们可以做一些调整:
.test {
/* 在.test中动态创建span标签,并插入到第一个子元素的位置 */
*zoom: expression(this.runtimeStyle.zoom="1",this.insertBefore(document.createElement("span"),this.firstChild).className="ie-before");
}
.test:before,.
test .ie-before {
content: attr(title);
color: red;
/* IE6\7 */
*zoom: expression(this.runtimeStyle.zoom='1',this.innerText=this.parentNode.title);
}
看看效果如何??呵呵,还不错吧。
其实如果expressioin中的JS语句可以更多更灵活,可以实现更多的需求,但是考虑到如果将expression应用在数量较大的DOM上时,那么还是会有可能崩溃,所以还是要慎重啊。
为IE6-7间接支持:before和:after伪类的更多相关文章
- IE下CSS3伪类的支持
当css3.0出现以后,着实让我兴奋了好久,因为出现了很多选择器,我们在也不用靠js做复杂判断了.比如:nth-child,很容易就可以判断奇偶对象 “:nth-child(2n)和:nth-chil ...
- Selectivizr-让IE6~8支持CSS3伪类和属性选择器
一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性 ...
- 解决ie6下不支持fix属性,模拟固定定位
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- 让IE6/IE7/IE8支持HTML5标签的js代码
让IE(ie6/ie7/ie8)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE来调用这个j ...
- IE6浏览器不支持固定定位(position:fixed)解决方案(转)
IE6浏览器不支持固定定位(position:fixed)解决方案 来源:互联网 作者:佚名 时间:12-04 10:54:05 [大 中 小] 点评:有些朋友在进行网页布局时,会遇到IE6浏览器 ...
- 使ie6/7/8支持css3的方法
使用PIE.htc让IE6\7\8支持CSS3部分属性 包括圆角,阴影,背景渐变等效果 下载地址 http://css3pie.com/download/ 需要注意几点的是 第一,pie是以相对页面h ...
- 通过IE私有滤镜让IE6 7 8支持背景透明,内容不透明效果。
CSS3已经支持背景rgba的rgba透明度,这一方法可以避免元素内容也随背景一起变透明(详情请阅http://www.cssha.com/css3-new-knowledge-student).但是 ...
- 【IE6的疯狂之八】链接伪类(:hover)CSS背景图片有闪动BUG
IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath ...
- 解决scroll在ios上卡顿问题和兼容ios不支持:active伪类情况
//有时候因为滚动层级元素过多会产生卡顿,特别在ios上十分明显,如果不想更换其他实现方式,可以加:-webkit-overflow-scrolling: touch; 开启硬件加速: 兼容ios不支 ...
随机推荐
- java中文乱码解决之道(二)—–字符编码详解:基础知识 + ASCII + GB**
原文出处:http://cmsblogs.com/?p=1412 在上篇博文(java中文乱码解决之道(一)—–认识字符集)中,LZ简单介绍了主流的字符编码,对各种编码都是点到为止,以下LZ将详细阐述 ...
- windows通过cmd重新启动网卡
ipconfig/release ipconfig/renew
- bootstrap-js(1)模态框
1.禁止动画效果 如果你不需要模态框弹出时的动画效果(淡入淡出效果),删掉 .fade 类即可.一般还是不要去动这个,最多自己换个类名在写其他样式,不然你会头大的. <div class=&qu ...
- Maven 搭建与my-app项目测试
前提条件,安装jdk1.6及以上版本,并配置JAVA_HOME 首先,下载Maven3.2.2,附下载地址:http://mirror.bit.edu.cn/apache/maven/maven-3/ ...
- whereis linux文件搜索
whereis命令只能用于程序名的搜索,而且只搜索二进制文件(参数-b).man说明文件(参数-m)和源代码文件(参数-s).如果省略参数,则返回所有信息. 和find相比,whereis查找的速度非 ...
- day9_python学习笔记_chapter12_模块
1. 名称空间加载顺序: 首先加载内建名称空间,他由__builtin模块中的名字构成.然后加载执行模块的全局名称空间,他会在模块开始执行后变为活动名称空间.如 果在执行期间调用了一个函数,那么将创建 ...
- linux 下eclipse配置apache服务器,选中server时server name为灰色状态
后来发现,没有创建
- 文件上传input type="file"样式美化
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- javaScript的2种变量范围有什么不同
1.javascript怎样选中一个checkbox,怎样设置它无效? document.all.cb1[0].disabled = true; 2.js中的3种弹出式消息提醒(警告窗口,确认窗口 ...
- Cortex-M3 动态加载一(地址无关代码实现)
这篇文章是自己疑惑究竟地址无关性是如何实现,然后查看汇编和CPU指令手册,最后分析解除自己疑惑的,高手不要鄙视,哈哈. 编译C代码时候需要制定--acps/ropi选项,如下例子: void Syst ...