Home > Internet > IE6、IE7、Firefox之间的兼容写法
2009June . 10th

IE6、IE7、Firefox之间的兼容写法

因为不同浏览器对W3C标准的支持不一样,各个浏览器对于页面的解释呈视也不尽相同,比如IE在很多情况下就与FF存在3px的差距,对于这些差异性,就需要利用css 的hack来进行调整,当然在没有必要的情况下,最好不要写hack来进行调整,避免因为hack而导致页面出现问题。

1、 IE6、IE7、Firefox之间的兼容写法:

写法一:

IE都能识别*;标准浏览器(如FF)不能识别*; 
IE6能识别*,但不能识别 !important, 
IE7能识别*,也能识别!important; 
FF不能识别*,但能识别!important; 
根据上述表达,同一类/ID下的CSS hack可写为: 
.searchInput { 
background-color:#333;/*三者皆可*/ 
*background-color:#666 !important; /*仅IE7*/ 
*background-color:#999; /*仅IE6及IE6以下*/ 
} 
一般三者的书写顺序为:FF、IE7、IE6。

写法二:

IE6可识别“_”,而IE7及FF皆不能识别,所以当只针对IE6与IE7及FF之间的区别时,可这样书写: 
.searchInput { 
background-color:#333;/*通用*/ 
_background-color:#666;/*仅IE6可识别*/ 
}

写法三:

*+html 与 *html 是IE特有的标签, Firefox 暂不支持。 
.searchInput {background-color:#333;} 
*html .searchInput {background-color:#666;}/*仅IE6*/ 
*+html .searchInput {background-color:#555;}/*仅IE7*/ 
 
屏蔽IE浏览器: 
 
select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。 
 
*:lang(zh) select {font:12px !important;} /*FF的专用*/ 
select:empty {font:12px !important;} /*safari可见*/ 
 
IE6可识别: 
 
这里主要是通过CSS注释分开一个属性与值,注释在冒号前。 
 
select { display /*IE6不识别*/:none;}

IE的if条件hack写法:

所有的IE可识别: < !–[if IE]> Only IE < ![end if]> 
只有IE5.0可以识别: 
< !–[if IE 5.0]> Only IE 5.0 < ![end if]> 
IE5.0包换IE5.5都可以识别: 
< !–[if gt IE 5.0]> Only IE 5.0+ < ![end if]> 
仅IE6可识别: 
< !–[if lt IE 6]> Only IE 6- < ![end if]> 
IE6以及IE6以下的IE5.x都可识别: 
< !–[if gte IE 6]> Only IE 6/+ < ![end if]> 
仅IE7可识别: 
< !–[if lte IE 7]> Only IE 7/- < ![end if]>

本文转载自:http://blog.admin9.com/?p=988

  1. 2009June . 10th - 6:44 PM

    收集了。。。

  2. 2009June . 10th - 8:50 PM

    我是执着于 CSS HACK 的,哈。

  3. 2009June . 10th - 10:50 PM

    嗯,这个是必要的,为用户体验着想!

  4. 2009June . 10th - 11:24 PM

    bolo家快成技术博客了 哇。最近好多教程啊=w=

  5. 2009June . 10th - 11:42 PM

    哎不大懂这玩意。就知道我的模板 有几个好像不支持

  6. 2009June . 10th - 11:53 PM

    最后这段见过,似乎大家都不关心Safari.

  7. 2009June . 11th - 1:12 AM

    有没有兼容chrome的啊。

  8. 2009June . 11th - 8:53 AM

    @芒果
    嗯,令模板兼容更多的浏览器对自己和访客都有好处
    @seri
    这几天在研究这些东西而已
    @平平
    学一学,慢慢把模板完善呗
    @LAONB
    我觉得webkit核心的浏览器都不错
    @我想想
    兼容safari基本上也就兼容chrome了

  9. 2009June . 11th - 1:06 PM

    不错~又学一招

  10. 2009June . 11th - 2:41 PM

    @我想想
    我是想知道的说 @,@

  11. 2009June . 11th - 6:01 PM

    只知道最后一个,学习了

  12. 2009June . 11th - 9:14 PM

    经验之谈啊!! :grin: 谢了

  13. 2009June . 11th - 10:58 PM

    对我太有用处了。。。
    最近我设计的页面都不太兼容

  14. 2009June . 12th - 12:43 AM

    很好的文章 过来支持下哈 我之前写了一个用 的写法去 同理实现了 但是没有分析那个一个效率高一点!~

  15. 2009June . 12th - 12:43 AM

    测试下TRACKBACKS 的功能

  16. 2009June . 12th - 4:46 PM

    IE6 是个大问题。。

  17. 2009June . 12th - 5:14 PM

    神说,你的网站打开速度很快

  18. 2009June . 12th - 10:40 PM

    @ken
    我认为css hack是最好的
    @小奥
    的确,我已经对ie6深恶痛绝了
    @that5
    换我这种主机呗 :grin:

  19. 2009June . 13th - 12:30 PM

    IE6太恶劣了,所以懂得HACK很重要呢~

  20. 2009June . 13th - 12:31 PM

    以前还会另做一个ie6.css,现在直接无视IE6

  21. 2009June . 14th - 4:26 PM

    收藏 收藏。。。

  22. 2009June . 17th - 6:09 PM

    我的博客好像在IE7下测试通过。。 IE6下有点问题。。

  23. 2009June . 17th - 6:40 PM

    @阿东
    强烈建议不要再为ie6花心机了,逼ie6er们升级

  24. 2009June . 18th - 1:32 AM

    我从来不会给IE测试。。。只用Linux。。。哈哈。。。

  25. 2009June . 21st - 7:00 PM

    回复一下,顺便看看文章

  26. 2009June . 21st - 9:22 PM

    @ABitNo
    这样。。不太好吧?
    @创业
    呵呵,文章才是最重要的哦

  27. 2009June . 21st - 9:54 PM

    @bolo
    不明白那些用IE内核浏览器的人有什么原因。。。

Subscriber selector

Close