码迷,mamicode.com
首页 > 其他好文 > 详细

浏览器兼容性问题(待更新)

时间:2017-06-19 00:36:45      阅读:264      评论:0      收藏:0      [点我收藏+]

标签:die   --   头部   hack   html   文件   color   iam   isp   

1、对于不支持渐变的浏览器,可以添加浏览器前缀来适应渐变效果

浏览器前缀:

Firefox -moz-

Chrome & Safari -webkit-

Opera : -o-

IE : -ms-

2、如果浏览器不支持属性的话,前缀则加载属性名称前

ex:

animation : css3中做动画的属性

-moz-aniamtion:;/*火狐*/

-webkit-animation:;/*Chrome&Safari*/

-o-aniamtion:;/*Opera*/

3、如果浏览器不支持属性值的话,前缀则加在属性值的前面

background-image:-moz-linear-gradient();

4、弹性布局

display:-webkit-flex;

5、

HTML头部引用Hack(掌握)

通过 IE条件注释完成Hack,通过条件判断浏览器版本再执行相应内容

条件注释语法:

<!--[if 条件 IE 版本号]>

满足浏览器要执行的内容

<![endif]-->

版本号:

16~10

2、省略版本号,判断是否为IE浏览器

条件:

1gt

判断当前浏览器是否大于指定版本的浏览器

<!--[if gt IE 8]>

只有在 版本大于 IE 8的时候才执行

<![endif]-->

2gte

判断当前浏览器是否大于等于指定版本的浏览器

3lt

判断当前浏览器是否小于指定版本浏览器

4lte

判断当前浏览器是否小于等于指定版本浏览器

5判断当前浏览器是否是指定版本浏览器

<!--[if IE 6]>

只在IE6中执行

<![endif]-->

通过头部引用Hack 判断当前浏览器是否为IE8及以下

<!--[if lt IE 9]>

<script src=""></script>

<![endif]-->

<title>类内部hack</title>

    <meta charset="utf-8">

    <style>

      #d1{

        width:200px;

        height:200px;

        background-color:black;

        /*IE8910中显示背景色绿色*/

        background-color:green\0;

        /*IE910中显示背景色蓝色*/

        background-color:blue\9\0;

        /*IE7 中,显示背景色为粉色*/

        +background-color:pink;

        /*IE6 中,显示背景色为红色*/

        -background-color:red;  

      }

 <body>

    <!--[if gt IE 8]>

      <h1>该段内容只能在IE8(不包含)以上的浏览器中被执行</h1>

    <![endif]-->

 

    <!--[if gte IE 8]>

      <h1>该段内容只能在IE8(包含)以上的浏览器中被执行</h1>

    <![endif]-->

  </body>

<head>

    <title>Hack练习</title>

    <meta charset="utf-8">

    <!-- 引入 无兼容性问题的 css文件 -->

    <link rel="stylesheet" href="style_basic.css">

    <!-- 引入 IE6 兼容性问题的 css文件 -->

    <!--[if IE 6]>

      <link rel="stylesheet" href="style_ie6.css">

    <![endif]-->

    <!--[if IE 8]>

      <link rel="stylesheet" href="style_ie8.css">

    <![endif]-->

  </head>

浏览器兼容性:

Chrome & Safari :

-webkit-perspective:...px;

兼容性

@-webkit-keyframes 名称{}

@-moz-keyframes 名称{}

@-o-keyframes 名称{}

@-ms-keyframes 名称{}

浏览器兼容性问题(待更新)

标签:die   --   头部   hack   html   文件   color   iam   isp   

原文地址:http://www.cnblogs.com/yangxu93/p/7045852.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!