關於ie8兼容問題

1. background屬性不支持連寫 如下這種寫法能夠

background-image:url(../images/14050258.jpg);
background-position: center; 

2.ie8不支持選擇器 first—child 和nth-child 解決方法
  方法1 換成別的選擇器 好比加class 或加id

  方法2 好比ul>li:nth-child(3)能夠寫成 tr>li+li+li 或 ul>li:first-child+li+li

 

如下爲判斷是否爲ie 而後用不一樣的選擇器

3.實現背景顏色漸變的兼容寫法
     background: -webkit-linear-gradient(top, #99c, #bbc);
     background: -moz-linear-gradient(top, #bbc, #558);
     background: -ms-linear-gradient(top, #bbc, #558);//兼容ie
     background: linear-gradient(top, #bbc, #558); 

  　　 兼容ie8  GradientType=1(表示從左到右) GradientType=0（表示從上到下）
 
     filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#0F3253 42%', endColorstr=' #022743 58%,#022743 100%',GradientType=1 )

  4. ie8不支持點擊事件怎麼辦

    把引用的jquery文件換成

 <script src="js/jquery-1.12.0.min.js"></script>

    

 在ie8如下怎麼表示

 在html head與head之間   如下這段代碼就表示在ie8瀏覽器下 footer的顏色值爲white

<!--[if IE 8]>
<style>
    footer{
        color: white;
    }
</style>
<![endif]-->

這個表示ie9如下的瀏覽器引用這兩個js

<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<script src="js/html5shiv.min.js"></script>
<![endif]-->

小demo

<script src="../static/h-ui/js/jquery-1.12.0.min.js"></script>
<script src="../static/h-ui/js/bootstrap.min.js" charset="utf-8"></script>
<script src="../static/h-ui/js/commer.js"></script>
<script src="../static/h-ui/js/set_basic.js"></script>
<script src="../static/h-ui/js/jquery.placeholder.min.js"></script><!--兼容input裏面的placeholder-->
<!--[if lt IE 9]> <!--兼容ie9如下的媒體查詢與h5的語義化標籤-->
<script src="../static/h-ui/js/respond.min.js"></script>
<script src="../static/h-ui/js/html5shiv.min.js"></script>
<!-- <![endif];-->

總結：要想解決ie不支持點擊事件 先引入1.9如下的query文件（在引入別的js文件以前必定要先引入jquery） 引入大概順序可參考上面demo案例
bootstrap文件只是頁面框架加不加不影響點擊事件效果











針對部分屬性綜合性解決

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta  http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=11" /> <!--//用IE8訪問時就會自動切換到IE11模式-->
<meta name="author" content="zhy" />
<title> 排行榜</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/header_footer.css"/>
<link rel="stylesheet" href="css/rating.css"/>
<link rel="stylesheet" href="css/media.css"/>
<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.placeholder.min.js"></script> <!--兼容input裏面的placeholder-->
<!--[if lt IE 9]> <!--兼容ie9如下的媒體查詢與h5的語義化標籤-->
<script src="js/respond.min.js"></script>
<script src="js/html5shiv.min.js"></script>
<!-- <![endif];-->