CSS 技巧收集1

08.03.2010, Librarys, by .

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

具体写法很容易:

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

说明和解释:

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

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

#class{
    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));
}

CSS 的自动换行问题:

div,p{white-space:normal;word-break:break-all;word-wrap:break-word;}
table{table-layout:fixed;}
table th,table td{word-wrap:break-word;overflow:hidden;}
pre{white-space:pre-wrap;word-wrap:break-word;width:auto;}

pre 下面添加宽度自动的属性是为了防止在 IE7 里面的某些情况下宽度失效。

另外附赠 收集到的常见浏览器的默认 CSS 样式,下载在这里

15 Replies

  1. 异蓝 says:

    上上下下左右左右BA

    Reply

  2. 异蓝 says:

    @异蓝: 原来不是这样啊~~~~~郁闷

    Reply

  3. 酸奶 says:

    上上下下左右左右BA

    Reply

  4. chuan says:

    好久没到这个地方来

    Reply

  5. 宁波网站建设 says:

    三个浏览器都要兼容啊~

    Reply

  6. aben says:

    expression….没读懂这段话,改天下载例子看看

    Reply

  7. Xu.hel says:

    我要离开十多天

    Reply

  8. 火跃 says:

    没看懂第二个!

    Reply

  9. Intruz says:

    太棒了,它帮助我在一个案件。 ;)

    Reply

  10. 枫非寒 says:

    @Xu.hel: 回火星?

    Reply

  11. 心灵黑白键 says:

    受教了 徐黑 你厉害。。。。。

    Reply

  12. 百奥博 says:

    好像让IE6支持”position:fixed“,还缺些东东

    Reply

  13. 在路上 says:

    学习了,

    Reply

  14. PHVision says:

    例子1的_top里的东东看不懂,是给IE6算的高度吗?

    Reply

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据