据说浏览器兼容问题曾经一直不被重视,因为国内曾经是IE这个巨无霸的天下,网站只要做好IE就浮云了,但是随着人们的价值品味的改变,和以谷歌、火狐等浏览器领头的冲击,IE的热量在逐渐消退,越来越多的用户使用上了非IE内核的浏览器,目前市面上非IE内核的浏览器主流的、非主流的太多了,所以,前端开发者的难题就来了——浏览器兼容,这个另众多前端开发者头大的问题

懂得CSS的朋友,应该听说过CSS hack,现在的浏览器如IE、Firefox、Chrome、Opera、Safari。。。百家争鸣,可苦了Web前端开发者。下面是我在网络整理的一些资料,希望对大家有所帮助。

浏览器的粗分类

虽然目前流传的浏览器种类颇多,但是实际上可以将所有主流浏览器大致的分为两个类型:

1、IE内核浏览器(IE6、IE7、IE8、360浏览器、QQ浏览器、傲游浏览器)

2、标准浏览器(狐火浏览器、Safari浏览器、Opera浏览器、Google浏览器)

不同的浏览器对CSS的解释都有一些特殊情况,特别是padding, line-height这些要细微控制的地方,下面的hack基本可以解决这个问题:

1、在属性前加下划线(_),那么此属性只会被IE6解释;

2、在属性前加星号(*),此属性只会被IE7解释;

3、在属性值后面加"9",表示此属性只会被IE8解释

各浏览器CSS hack兼容表:

color:red; /* 所有浏览器都支持 */

color:red !important;/* Firefox、IE7支持 */

_color:red; /* IE6支持 */

color:red; / IE6、IE7支持 */

+color:red; / IE7支持 */

color:red9; /* IE6、IE7、IE8支持 */

color:red; /* IE8支持 */

body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */

color:red; /* 所有浏览器都支持 */

color:red !important;/* Firefox、IE7支持 */

_color:red; /* IE6支持 */

color:red; / IE6、IE7支持 */

+color:red; / IE7支持 */

color:red9; /* IE6、IE7、IE8支持 */

color:red; /* IE8支持 */

body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */

当然,我只是粗略的列举的一些,更多资料你可以打开这里 更可以打开这里

标签: css, 前端路上

已有 26 条评论

  1. 完全的摒弃IE的路过 :cool:

    1. Tokin Tokin

      那你的博客可真的属于个人博客了,不过还真省心,我都快被IE折腾疯了,累人

      1. 反正我各种无视IE...没关系几年以后就不必要关心IE什么的了

  2. 虽然有ie10,但仍觉得垃圾,不人性化

    1. Tokin Tokin

      没用过IE10,不过看几张图,挺喜欢它那UI的

  3. IE10很不错。这些东西小网站不必考虑,差别不会太大,除非追求极致。

    1. Tokin Tokin

      算是玩前端必知的了,而且折腾主题,能有效解决浏览器不兼容问题

  4. 好像来第二次了

    1. Tokin Tokin

      你之前也来过几次。。。

  5. 少用hack :razz:

    1. Tokin Tokin

      确实,CSS变大了不少,唉!不过为了兼容,值得…
      难道还有其他的副作用…

  6. 覆盖还是什么?怎么处理

    1. Tokin Tokin

      没明白你的意思

  7. Tokin也开始鼓捣CSS Hack了?嘿嘿,CSS Hack好玩。不同浏览器不同色彩 :idea: :idea: :idea:

    1. Tokin Tokin

      我还没那么NB。。。闲得没事可以睡觉。

  8. hack太头疼了。。。 记得有一次为了IE6,我差点一个晚上没睡觉 - -。。。

    1. Tokin Tokin

      至于么。。。我决定,以后再也不为IE6头疼了

  9. IE这老骨头,我看没什么人用了。
    P.S.找茬:狐火浏览器?

  10. 原来如此,
    我的主题貌似不太支持ie6,也无所谓。

  11. 兼容问题之类的嘿烦了,一般都懒得去弄那些比较旧版本浏览器的兼容了,反正那些也是会被淘汰的

    1. Tokin Tokin

      在没完全淘汰之前,这些东西还是需要照顾一下的

  12. 貌似相关文章最后一个是固定的广告

    1. Tokin Tokin

      小伙,眼力不错呀,我挂了快两个月了

      1. 不对,原先是招聘广告位,都带到主题里了

        1. 之所以相关文章最后一个是没有边框css的li,是因为你手动添加的

          1. Tokin Tokin

            哎呀,果真聪明,主题发布的时候忘了撤那东西,没办法…
            至于那个li,原本我就想要个广告位的,手动添加一个没有li的,刚刚好

添加新评论