zoukankan      html  css  js  c++  java
  • 浏览器为什么会有兼容性问题

    前言:

      作为一位专业的前端开发人员,浏览器兼容性问题是我们必然会遇到的问题,今天就以我个人观点来为大家说说个大浏览器的洁容问题。

      简单的来说就是个大浏览器使用的内核版本是不一样的,有着具有自己的内核。其中不得不说ie6、7了。作为我们前端人员来说ie无疑成为我们前端开发人员的一大阻碍,有人就说ie是垃圾浏览器,是奇葩浏览器。而为什么还会用它呢,那是它在市场上占据着重要地位。其实在很早以前ie就占据了绝大部分的浏览器市场拥有者霸主地位,以谷歌,火狐为代表的浏览器商家为了争夺市场,重新瓜分浏览器市场这块大的蛋糕,于是就组织起来制定了w3cschool的这样的一套规范来与ie来进行抗衡。就是这样ie浏览器和w3c下的个大浏览器才会有这么多的兼容性问题。说到这里其实浏览器兼容性原因很简单那是因为ie先于为w3c诞生。在w3c诞生之前ie就有着自己的的一套执行的标准。之所以以谷歌,火狐为代表的浏览器商家会指定一套属于自己的标准,究其根源是为了争夺市场的占有力。两个字“利益”。其实ie并没有错,我们不能只看到事物的一面,还要看到实物的本质。用哲学的话来说,我们要从感性认识上升到理性认识透过事物的表象抓住事物的本质。可以看到在后来的ie8以后,ie为了在市场上生存下去,只有向w3c妥协。慢慢接近于为w3c的标准。

    下面来说说CSS问题,因为一点点布局上的bug,可能导致整个页面的错位,在用户看来这是极不专业的。

    现在我就简要说说我对CSS兼容问题的认识: 先说点Hack的知识(真正的高手是不用Hack的,但要成为高手必须通过Hack这一关)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    /* CSS属性级Hack */
     
    color:red; /* 所有浏览器可识别*/
     
    _color:red; /* 仅IE6 识别 */
     
    *color:red; /* IE6、IE7 识别 */
     
    +color:red; /* IE6、IE7 识别 */
     
    *+color:red; /* IE6、IE7 识别 */
     
    [color:red; /* IE6、IE7 识别 */
     
    color:red9; /* IE6、IE7、IE8、IE9 识别 */
     
    color:red; /* IE8、IE9 识别*/
     
    color:red9; /* 仅IE9识别 */
     
    color:red ; /* 仅IE9识别 */
     
    color:red!important; /* IE6 不识别!important 有危险*/
     
    /* CSS选择符级Hack */
     
    *html #demo { color:red;} /* 仅IE6 识别 */
     
    *+html #demo { color:red;} /* 仅IE7 识别 */
     
    body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 */
     
    head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */
     
    :root #demo { color:red9; } : /* 仅IE9识别 */
     
    /* IE条件注释Hack */
     
    <!--[if IE 6]>此处内容只有IE6.0可见<![endif]-->
     
    <!--[if IE 7]>此处内容只有IE7.0可见<![endif]-->
  • 相关阅读:
    uva 10561 sg定理
    二进制下 求分数化小数的循环节问题
    zoj 2562 反素数
    uva 11916 解模方程a^x=b (mod n)
    Android 组件化方案探索与思考
    2018谷歌I/O开发者大会8大看点汇总 新品有哪些
    Glide高级详解—缓存与解码复用
    Android性能优化:手把手带你全面实现内存优化
    Android几种强大的下拉刷新库
    Android app 在线更新那点事儿(适配Android6.0、7.0、8.0)
  • 原文地址:https://www.cnblogs.com/fengdong/p/4842282.html
Copyright © 2011-2022 走看看