美文网首页
浏览器兼容

浏览器兼容

作者: Ligod | 来源:发表于2017-05-10 15:29 被阅读0次

    1.什么是css hack

    由于不同浏览器或者相同浏览器不同版本对css的解析不完全一样,因此导致页面效果不一样,这时我们需要针对不同浏览器去写不同的css,让它能在不同浏览器得到我们需要的效果,这就是css hack。

    2.谈一谈浏览器兼容的思路

    1.考虑要不要做

    • 从产品的角度(产品的受众、受众的浏览器比例、针对受众是效果优先还是基本功能优先)
    • 成本的角度(有没有必要去兼容)

    2.做到什么程度
    要做兼容的话要达到什么程度,让哪些浏览器兼容,IE浏览器做到哪个版本。

    3.如何做

    • 根据兼容需求选择技术框架/库;
    • 根据需求选择兼容工具(html5shiv.js、respond.js、css reset、 normaliz.css、modernizr)
    • postCss
    • 条件注释、CSS hack、js能力检测。

    3.列举5种以上浏览器兼容的写法

    1.条件注释
    是html源码中被IE有条件解释的语句;可用来向IE提供和隐藏代码。

      <!--[if IE 6]>
      <p>You are using Internet Explorer 6.</p>
      <![endif]-->  /* IE6中执行 */
      <!--[if !IE]><!-->
      <script>alert(1);</script>
      <!--<![endif]-->   /* 非IE执行 */
      <!--[if IE 8]>
      <link href="ie8only.css" rel="stylesheet">
      <![endif]-->   /* IE8中执行 */
      只在IE下生效
      <!--[if IE]>
      这段文字只在IE浏览器显示
      <![endif]-->
      只在IE6下生效
      <!--[if IE 6]>
      这段文字只在IE6浏览器显示
      <![endif]-->
      只在IE6以上版本生效
      <!--[if gte IE 6]>
     这段文字只在IE6以上(包括)版本IE浏览器显示
     <![endif]-->
     只在IE8上不生效
     <!--[if ! IE 8]>
     这段文字在非IE8浏览器显示
     <![endif]-->
     非IE浏览器生效
     <!--[if !IE]>
     这段文字只在非IE浏览器显示
     <![endif]-->
    

    条件注释结合js

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    Paste_Image.png

    2.属性前缀法
    IE6能识别下划线""和星号" * ",IE7能识别星号" * ",但不能识别下划线"",IE6~IE10都认识"\9",但firefox前述三个都不能认识

    .box{
    color: red;
    _color: blue; /*ie6*/
    *color: pink; /*ie67*/
    color: yellow\9;  /*ie/edge 6-8*/
    }
    

    2.1 浏览器私有前缀添加

    -webkit-border-radius: 50%;//chrome
    -o-border-radius: 50%;//opera
    -moz-border-radius: 50%;//FixFore
    -ms-border-radius: 50%;//IE edge
    

    3.选择器前缀法

    *html *前缀只对IE6生效
    *+html *+前缀只对IE7生效
    @media screen\9{...} 只对IE6/7生效
    @media \0screen {body { background: red; }} 只对IE8有效
    @media \0screen\,screen\9{body { background: blue; }} 只对IE6/7/8有效
    

    4.使用兼容工具
    html5shiv.js:在IE6~8上模拟html5标签
    respond.js:在IE6~8上模拟CSS3 Media Queries
    css reset normalize.css样式重置
    modernizr库

    4.以下工具/名词是做什么的

    • 条件注释
      是于HTML源码中被 IE 有条件解释的语句。条件注释可被用来向 IE提供及隐藏代码。利用IE6-9的漏洞来区分IE各版本。
    • IE Hack
      IE浏览器不同版本对css的解析不完全一样,因此导致页面效果不一样,这时我们需要针对浏览器去写不同的css,让它能在浏览器得到我们需要的效果,这就是css hack。
    • js 能力检测
      检测浏览器的类型及版本,是否支持特定的能力,然后根据检测的结果让页面兼容浏览器。检测浏览器支持的属性和方法。
    • html5shiv.js
      兼容性工具,模拟html5标签,用于解决IE9以下版本浏览器对HTML5新增标签不识别,并导致CSS不起作用的问题。
    • respond.js
      兼容性工具,为IE6-8和其他不支持css3媒体查询功能的浏览器提供媒体查询的min-width和max-width特性,实现响应式网页设计。
    • css reset
      兼容性工具,将浏览器的默认样式全部去掉,重新定义标签样式。
    • normalize.css
      重置样式,与css reset相比相对平和,会保留有用的样式,更好的通用性和可维护性。
    • Modernizr
      一个用来检测浏览器功能支持情况的 JavaScript 库,会为html标签生成一批css的class名,来标记当前浏览器支持不支持的特性,这样就可以方便为浏览器添加兼容样式。
    • postCSS
      它是一个平台,可以让一些插件在上面跑来处理css,通过插件可以帮css处理成兼容性代码。

    5.一般在哪个网站查询属性兼容性?

    http://caniuse.com
    <a href="http://browserhacks.com">查询hack写法</a>

    相关文章

      网友评论

          本文标题:浏览器兼容

          本文链接:https://www.haomeiwen.com/subject/znmwtxtx.html