解决IE6、IE7、Firefox兼容最简单的CSS Hack

很早就在这里看到过解决方案,与嗷嗷讨论后发现这个方案还是很可靠的。当然,唯一的缺点就是每一个属性都要去Hack,但我在很多实践中,只用‘修正’1-2个属性就可以了。

具体写法很容易:

#someNode
{
    position: fixed;
   #position: fixed;
   _position: fixed;
}
  • 第一排给Firefox以及其他浏览器看
  • 第二排给IE7(可能以后的IE8、IE9也是如此,谁知道呢)看
  • 第三排给IE6以及更老的版本看

最好的应用就是可以让IE6也“支持”position:fixed,而且,配合这个原理,可以做到不引入JavaScript代码(仅用IE6的expression),我这里有一个现成的页面,CSS如下写:

#ff-r
{
 position:  fixed;
_position:  absolute;
 right:     15px;
 top:       15px;
_top:       expression(eval(document.compatMode && 
            document.compatMode=='CSS1Compat') ? 
            documentElement.scrollTop+15 : 
            document.body.scrollTop +
            (document.body.clientHeight
            -this.clientHeight));
}

是不是很方便:)

Advertisements

25 thoughts on “解决IE6、IE7、Firefox兼容最简单的CSS Hack

  1. 用expression会非常耗资源,以前referer后台有这样用,后来发现网页莫名奇妙的狂占内存,后来发现是expression的问题,因为css中的expression是不断在执行。

      1. 是这样,expression只是一种取巧的写法。你可以观察一下,在用expression实现滚动效果的页面中,鼠标随便晃动,内存都会增加

      2. 寒,这个到真没有观察。Anyway,我觉得小项目这样做也没关系。要知道Flash7的内存泄漏比这个厉害多了。
        其实使用expression主要就是为了省掉JavaScript,呵呵……

      3. 忽然想起当初为什么发现这个问题,其实不是因为内存占用,是因为ie crash!
        刚开始有短时间在clicki的后台进行操作,ie经常莫名其妙死掉,我以为是ajax的问题,后来发现是这个expression造成的!

  2. 为什么无法区分ie6和ie7??
    难道是ie7修复了这个bug??

    #someNode
    {
    position: fixed;
    #position: fixed;
    _position: fixed;
    }

    #someNode
    {
    position: fixed;
    +position: fixed;
    _position: fixed;
    }

  3. 你好,请教以下,如果让我的网站实现对ie6的css hack,其他ie7,ie8,safari,firefox都已经完成,ie6把我难道了,如果可以帮助我,万分感谢

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.