css hack基本概念
CSS hack是通過在CSS樣式中加入一些特殊的符號，讓不同的瀏覽器識別不同的符號（什麼樣的瀏覽器識別什麼樣的符號是有標準的，CSS hack就是讓你記住這個標準），以達到應用不同的CSS樣式的目的。
CSS Hack常見的有三種形式：
CSS屬性Hack、CSS選擇符Hack以及IE條件註釋Hack， Hack主要針對IE瀏覽器。
1、屬性級Hack：比如IE6能識別下劃線”_”和星號” * “，IE7能識別星號” * “，但不能識別下劃線”_”，而firefox兩個都不能認識。
2、選擇符級Hack：比如IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}。
3、IE條件註釋Hack：IE條件註釋是微軟從IE5開始就提供的一種非標準邏輯語句。比如針對所有IE：<!–[if IE]><!–您的代碼–><![endif]–>，針對IE6及以下版本：<!–[if lt IE 7]><!–您的代碼–><![endif]–>，這類Hack不僅對CSS生效，對寫在判斷語句裏面的所有代碼都 會生效。
PS：條件註釋只有在IE瀏覽器下才能執行，這個代碼在非IE瀏覽下被當做註釋視而不見。可以通過IE條件註釋載入不同的CSS、JS、HTML和服務器代碼等。
各瀏覽器下Hack的寫法
-ms-transform:rotate(7deg); //-ms代表ie內核識別碼
-moz-transform:rotate(7deg); //-moz代表火狐內核識別碼
-webkit-transform:rotate(7deg); //-webkit代表谷歌內核識別碼
-o-transform:rotate(7deg); //-o代表歐朋【opera】內核識別碼
-moz-transform:rotate(7deg); //-moz代表火狐內核識別碼
-webkit-transform:rotate(7deg); //-webkit代表谷歌內核識別碼
-o-transform:rotate(7deg); //-o代表歐朋【opera】內核識別碼
transform:rotate(7deg); //統一標識語句。。。最好這句話也寫下去，符合w3c標準
瀏覽器識別字符標準對應表
從上圖可以分析出以下幾種情況：
1.大部分特殊字符IE瀏覽器支持，其他主流瀏覽器firefox，chrome，opera，safari不支持 (opera可識別除外)。
2.\9 ：所有IE瀏覽器都支持
3._和- ：僅IE6支持
4.* ：IE6、E7支持
5.\0 ：IE8、IE9支持，opera部分支持
6.\9\0 ：IE8部分支持、IE9支持
7.\0\9 ：IE8、IE9支持
慎用\0的CSS Hack
在Web頁面製作中儘量不要使用CSS Hack來處理兼容問題。因爲任何瀏覽器下出現渲染不一致都極有可能是我們自己的結構或樣式不符合W3C的某些要求，或者說違背了瀏覽器的某些規則而造成的，所以我們應該儘量通過結構或CSS的修改來達到各瀏覽器渲染一致效果，除非到了萬不得已情況下，才考慮CSS的Hack。
網上許多與CSS Hack相關的文章中說，在css的屬性值和分號之間添加字符\0，可以實現對IE 8或 IE 9的CSS hack(有的說，僅支持IE8)。
網上的示例是這樣的：
網上的示例是這樣的：
.css-hack {
color: red; /* 其他瀏覽器顯示紅色 */
color: blue\0; /* IE8、IE9 顯示藍色 */
+color: green; /* IE7 顯示綠色 */
_color: brown; /* IE6 顯示棕色 */
}
1、IE10也能夠識別添加了字符\0的css屬性值(筆者這裏沒有IE 11，不知道IE 11是否也能識別)。
2、屬性值和\0之間不能有空格，有一個空格的話(例如：blue \0)，在IE 8中就失效了，僅對IE 9/IE 10有效。
3、如果我們只想對IE 8/IE 9進行CSS Hack呢？這個時候，我們去掉後面兩行與IE6、IE7有關的代碼。
.css-hack {
color: red; /* 其他瀏覽器顯示紅色 */
color: blue\0; /* IE8、IE9 顯示藍色 */
}
這是因爲一般瀏覽器的思路是，先過濾掉無效的css屬性值，然後再從正確的屬性設置中根據優先級獲取最後面的css屬性值。而IE 6/7瀏覽器不是先過濾掉無效的屬性值，而是先根據優先級，獲取最後面的css屬性值，然後再來判斷該屬性值是否，無效就忽略掉。因此，如果按照網上所說，僅僅使用\0來實現IE 8+的CSS Hack，則會對IE6/7中的顯示效果造成破壞。你必須通過額外的css屬性設置來複原IE6/7的樣式。
因爲，我們不能夠簡單地下結論說，使用\0可以實現對IE 8、IE 9甚至IE 10 +的CSS Hack。
css hack兼容技巧
1, FF下給 div 設置 padding 後會導致 width 和 height 增加, 但IE不會.(可用!important解決)
2, 居中問題
①.垂直居中.將 line-height 設置爲 當前 div 相同的高度, 再通過 vertical-align: middle.( 注意內容不要換行.)
②.水平居中. margin: 0 auto;(當然不是萬能)
3, 若需給 a 標籤內內容加上樣式, 需要設置 display: block;(常見於導航標籤)
4, FF 和 IE 對 BOX 理解的差異導致相差 2px 的還有設爲 float的div在ie下 margin加倍等問題
5, ul 標籤在 FF 下面默認有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見於導航標籤和內容列表)
6, 作爲外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達到高度自適應
7, 關於手形光標. cursor: pointer. 而hand 只適用於 IE
針對firefox ie6 ie7的css樣式
現在寫一個CSS可以這樣：
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
css佈局中的居中問題
主要的樣式定義如下：
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
首先在父級元素定義TEXT-ALIGN: center;這個的意思就是在父級元素內的內容居中；對於IE這樣設定就已經可以了。
但在mozilla中不能居中。解決辦法就是在子元素定義時候設定時再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要說明的是，如果你想用這個方法使整個頁面要居中，建議不要套在一個DIV裏，你可以依次拆出多個div，
只要在每個拆出的div裏定義MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
盒模型不同解釋
#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}
浮動ie產生的雙倍距離
#box{ float:left; width:100px; margin:0 0 0 100px; //這種情況之下IE會產生200px的距離 display:inline; //使浮動忽略}
#box{ display:block; //可以爲內嵌元素模擬爲塊元素 display:inline; //實現同一行排列的的效果 diplay:table;
頁面的最小寬度
所以並不影響到IE/WIN瀏覽器。這種的最麻煩的……
min-width是個非常方便的CSS命令，它可以指定元素最小也不能小於某個寬度，這樣就能保證排版一直正確。但IE不認得這個，而它實際上把width當做最小寬度來使。爲了讓這一命令在IE上也能用，可以把一個<div> 放到 <body> 標籤下，然後爲div指定一個類：
然後CSS這樣設計：
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? “600px”: “auto” );}
清除浮動
.hackbox{ display:table; //將對象作爲塊元素級的表格顯示}或者.hackbox{ clear:both;}
所以並不影響到IE/WIN瀏覽器。這種的最麻煩的……
#box:after{ content: “.”; display: block; height: 0; clear: both; visibility: hidden;}
DIV浮動IE文本產生3象素的bug
左邊對象浮動，右邊採用外補丁的左邊距來定位，右邊對象內的文本會離左邊有3px的間距。
#box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50
html #left{ margin-right:-3px; //這句是關鍵}
HTML代碼
<div id=”box”>
<div id=”left”></div>
<div id=”right”></div>
</div>高度不適應
高度不適應是當內層對象的高度發生變化時外層高度不能自動進行調節，特別是當內層對象使用
margin 或paddign 時。
例：
<div id=”box”>
<p>p對象中的內容</p>
</div>
CSS：#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
