CSS 技巧收集1

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 样式,下载在这里

Join the Conversation

15 Comments

  1. 异蓝说道:

    上上下下左右左右BA

  2. 异蓝说道:

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

  3. 酸奶说道:

    上上下下左右左右BA

  4. chuan说道:

    好久没到这个地方来

  5. 三个浏览器都要兼容啊~

  6. aben说道:

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

  7. Xu.hel说道:

    我要离开十多天

  8. 火跃说道:

    没看懂第二个!

  9. Intruz说道:

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

  10. 枫非寒说道:

    @Xu.hel: 回火星?

  11. 心灵黑白键说道:

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

  12. 百奥博说道:

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

  13. 在路上说道:

    学习了,

  14. PHVision说道:

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

Leave a comment

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