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

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]-->

版本号：

1、6~10

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

条件：

1、gt

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

<!--[if gt IE 8]>

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

<![endif]-->

2、gte

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

3、lt

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

4、lte

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

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;

/*在 IE8，9，10中显示背景色绿色*/

background-color:green\0;

/*在 IE9，10中显示背景色蓝色*/

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">

<link rel="stylesheet" href="style_basic.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 名称{}

posted on 2017-06-18 23:17 籽乌阅读(260) 评论(0) 收藏举报

刷新页面返回顶部