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">
<!-- 引入 无兼容性问题的 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 名称{}
扫一扫
1911
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
