巧用css expression表达式解决IE6的下before,after的兼容问题

IE6支持在css样式中使用 expression表达式,所以,可以针对IE6,使用expression表达式,通过js动态给对应的元素添加新的div元素,具体操作如下。

.tabs {
    *zoom: expression(
        this.runtimeStyle.zoom="1",
        this.insertBefore(
            document.createElement("div"),
            this.childNodes[0]
        ).className="before",
        this.appendChild(
            document.createElement("div")
        ).className="after"
    );
}
...

.tabs::before, .tabs .before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 20px;
    background-color: #eee;
}
.tabs::after, .tabs .after {
    content: '';
    display:inline-block;
    width: 10px;
    height: 20px;
    background-color: #c0c;
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一般来讲,为了兼容IE6和IE7一般会用到 css hack css hack 即在CSS样式中加入一些特殊的符号...
    意切阅读 104评论 0 0
  • 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能...
    卡卡西哥哥阅读 618评论 0 1
  • div+css 解决IE 6,7,8 FF兼容问题 IE8下兼容问题,加如下代码就实现从IE7到IE8的兼容 fl...
    big5阅读 325评论 0 2
  • 1.<!DOCTYPE HTML>文档类型的声明。 产生条件:IE6浏览器,当我们没有书写这个文档声明的时候,会触...
    望夜的星空阅读 467评论 0 3
  • 1.最常见的就是透明背景。解决办法:2.不能设置max和min,也就是不能设置最大宽和最小宽。解决办法:对于这个问...
    何wife阅读 304评论 0 0