瀏覽器兼容性問題(待更新)
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、
判斷當前瀏覽器是否小於指定版本瀏覽器
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 名稱{}
瀏覽器兼容性問題(待更新)