用戶使用的瀏覽器五花八門，我們要保證每一種瀏覽器都能兼容我們的代碼，不能要求用戶去改變瀏覽器，那么就得在我們的代碼上下功夫。此時我們要用到hack。
HACK就是針對不同的瀏覽器寫不同的HTML、CSS樣式，從而使各種瀏覽器達到一致的渲染效果。
下面我們就分別了解一下HTML的hack和CSS的hack。
（一）、HTML的hack
HTML的hack由注釋<!-- -->演變而來，在高級瀏覽器中注釋不會被加載，把IE瀏覽器的兼容代碼寫在注釋中，IE瀏覽器會識別。
HTML的hack代碼模板：
注：
①用於寫兼容的注釋，標簽內首位都要加！感嘆號。
②單詞都寫在一對中括號中
③IE和版本號之間要加空格
④不加比較單詞，表示只兼容這一個版本；
比較單詞：lt=less than(小於)、lte=less than or equal (小於等於)、gt=great than(大於)、gte=great than or equal(大於等於)
<!--[if IE ６]> <ｐ>只有IE6認識我<／p> <![endif]-->
只要記住這一個模板就知道HTML的兼容怎么寫了，下面我們列舉幾個：
<!--[if gte IE 9]> <h1>大於等於IE9的瀏覽器能看到</h1> <![endif]-->
<!--[if lte IE 8]> <h1 class="red">您的瀏覽器版本過低，IE8及以下版本不支持新樣式，請更新瀏覽器</h1> <![endif]-->
單獨寫給IE6的解決兼容問題的HTML代碼： <!--[if IE 6]> <script src="js/iepng.js" type="text/javascript"></script> <script type="text/javascript"> EvPNG.fix('div,ul,img,li,input,span,b,h1,h2,h3,h4'); </script> <![endif]-->
（二）、CSS的hack
CSS的hack包括：屬性的hack和選擇器的hack
設置css的hack要注意的是css樣式的層疊性，給同一個元素設置的兼容寫法必須寫在后面，否則會被層疊掉。
（1）屬性的hack
①只兼容IE6的hack
hack符：-或_，當做前綴寫在屬性前面，中間不加空格
在屬性名前面加短橫-或者下划線_(原理：高級瀏覽器及其他瀏覽器會認為這個前綴符號是一個unknown property name)，未知的屬性名，不會報錯，不予加載。
例：
background:red; //高級瀏覽器識別
_background:pink; //僅IE6識別
②兼容IE6、7的hack
hack符： ` ~ ! @ # $ % ^ & * ( ) + = [ ] | < > , . 中的任一字符，作為前綴寫在屬性前面
例：
background:red; //高級瀏覽器識別
！background:pink; //僅IE6、7識別
③只兼容IE8的hack
hack符：\0/，必須寫在屬性值與分號之間，中間不加空格
background:red; //高級瀏覽器識別
background:pink\0/; //僅IE8識別
④兼容IE8、9、10的hack
hack符：\0，必須寫在屬性值與分號之間，中間不加空格
background:red; //高級瀏覽器識別
background:pink\0; //IE8、9、10識別
⑤兼容IE6、7、8、9、10
hack符：\9，必須寫在屬性值與分號之間，中間不加空格
（2）選擇器的hack
給選擇器添加hack，這個選擇器中的樣式都是IE兼容樣式，其他高級瀏覽器不識別，同理給同一個選擇器設置的兼容樣式要寫在高級瀏覽器可識別的常規樣式后面，否則會被層疊
①IE6及以下版本的hack
hack符：* html，*和html之間有空格，再加一個空格，后面寫選擇器
例：
<!--常規寫法-->
.box{
width: 200px;
height: 200px;
border-radius: 50%;
background: yellowgreen;
}
<！--兼容寫法-->
* html .box{
width: 100px;
height: 100px;
background: skyblue;
}
②IE7及以下版本的hack
hack符：，英文逗號，寫在選擇器后面，不加空格
例：
.box,{
background: #999;
border: 10px solid red;
③兼容IE6以外的其他版本的hack
hack符：html>body，寫在選擇器前面，與選擇器之間有一個空格隔開
例：
html>body .box{
background: yellow;
}
④兼容IE6、7以外的版本的hack
hack符：html>/**/或html~/**/,寫在選擇器前面，與選擇器之間有一個空格隔開
例：
html>/**/body .box{
background: purple;
}