在很多時候，前端的兼容性問題，都很讓人頭痛！幸運的是，微軟從去年聲明：從2016年1月12日起，微軟將停止為IE8（包括IE8）提供技術支持和安全更新。整個前端圈子都沸騰起來，和今年七月份Adobe宣布計划終結 Flash一樣，都是IT屆的頭等大喜事。
但針對一些還在用IE的人來說，或者一些故意刁難問IE兼容的HR來說，確實是個難題，這里列舉一些兼容的方法
第一種，比較笨，但很有效果：條件注釋
注釋內容以樣式為例，如下：
1、支持所有IE瀏覽器
<!--[if IE]>
<link rel="stylesheet" href="all-ie-only.css" type="text/css"/>
<![endif]-->
2、支持非IE瀏覽器
<!--[if !IE]>
<link rel="stylesheet" href="not-ie.css" type="text/css"/>
<![endif]-->
或
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->
3、僅僅支持IE10
<!--[if IE 10]>
<link rel="stylesheet" type="text/css" href="ie10.css">
<![endif]-->
4、僅僅支持IE9
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="ie9.css">
<![endif]-->
............只想支持單一的某個IE版本，就和上述方法一樣
5、支持IE10以下版本（IE9以及IE9以下版本）
這種方法是樣式表使用在低於IE10的瀏覽器,換句話說除了IE10以外的所有IE版本都將被支持。
<!--[if lt IE 10]>
<link rel="stylesheet" type="text/css" href="ie9-and-down.css">
<![endif]-->
也可以寫成
<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="ie9-and-down.css">
<![endif]-->
前面我們也說過了lt和lte的區別,lt表示小於版本號，不包括條件版本號本身；而lte是小於或等於版本號，包括了版本號自身。
6、支持IE9以下版本（IE8以及IE8以下版本）
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css">
<![endif]-->
或：
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css">
<![endif]-->
............只想支持某個IE版本以下的方法，就和上述方法一樣
上面8——11這幾種方法，使用的是低於（lt）和低於或等於（lte）的方法來判斷，我們也可以使用大於（gt）和大於或等於（gte）達到上面的效果：
7、高於IE9的版本(IE10以及IE10以上版本)
<!--[if gt IE 9]>
<link rel="stylesheet" type="text/css" href="ie10-and-up.css">
<![endif]-->
或：
<!--[if gte IE 10]>
<link rel="stylesheet" type="text/css" href="ie10-and-up.css">
<![endif]-->
............只想支持某個IE版本以上，就和上述方法一樣
9、高於IE5.5的版本(IE6以及IE6以上版本)
<!--[if gt IE 5.5]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css">
<![endif]-->
或：
<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css">
<![endif]-->
注：以上 內容來自瀏覽器兼容之旅的第一站:如何創建條件樣式 ,轉載請注明，謝謝...
以上內容轉載並選擇摘錄內容
對上文的一點補充：
10、指定多種IE版本
<!--[if (IE 6)|(IE 7)|(IE 8)]>
<link rel="stylesheet" type="text/css" href="ie6-7-8.css">
<![endif]-->
第二種，使用hack技術，妥妥的，比較，每次判斷都重新寫內容，特別的麻煩，這時，針對css兼容的hack技術出行了（以下內容為原創）
例子1：
_background-color:green;/*給IE6用的*/
* /*給IE6/7用的*/
/*給IE8-11 用的*/
/*給IE 6-10用的*/
width:400px\9;/*以上的hack技術幾乎適用於所有屬性*/
例子2：
塊級元素的inline-block 在IE6/7下無效
解決：1.不用
2.添加 *display:inline * zoom:1;
並在一行的時候盡量不要使用
例子3：
IE6下會出現出現雙倍邊距問題
同方向浮動margin會產生雙邊距
解決:給浮動元素添加屬性 display:inline
例子4：
圖片存在下邊距問題
在任何圖片下都會有3px的間距
解決方法:1.給圖片添加display:block;
2.給圖片添加vertical-align:top (| middle | bottom)
例子5：
高版本的input表單中的默認圖標
/*
css-hack技術解決高版本IE默認圖標問題
*/
::-ms-clear{ display:none; }/*text input表單*/
::-ms-reveal{ display:none; }/*password input表單*/
例子6：
/*
定位屬性的單像素問題
在IE6中如果絕對定位的參考元素(有定位屬性的父級)
是單數的情況下
解決:1.不要使用單數
2.使用css-hack技術：_屬性：值 給IE6使用
*/
例子7：
/*
li中有元素具有浮動屬性時 會產生下邊距
解決:給li元素元素標簽添加屬性vertical-align:top
*/
例子8：
<meta http-equiv="X-UA-Compatible" content="IE=7">
#以上代碼告訴IE瀏覽器，無論是否用DTD聲明文檔標准，IE8/9都會以IE7引擎來渲染頁面。
<meta http-equiv="X-UA-Compatible" content="IE=8">
#以上代碼告訴IE瀏覽器，IE8/9都會以IE8引擎來渲染頁面。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<meta http-equiv="X-UA-Compatible" content="IE=7,9">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
#以上代碼IE=edge告訴IE使用最新的引擎渲染網頁，chrome=1則可以激活Chrome Frame.
最后，還有就是css3新屬性中一些不穩定的屬性值，應該在前面添加前綴
-webkit- 屬於chrome瀏覽器和safari瀏覽器的私有屬性，也是瀏覽器內核
-moz- 屬於firefox的私有屬性
-ms- 屬於IE瀏覽器的私有屬性
-o- 屬於opera的私有屬性
當然，除了以上的css的兼容方法，一定還有很多我不為所知的更好的兼容方法。希望知道的大神都能留下你們的足跡和你們所知道的方法，謝謝！！
我們的目標是：
哈哈！