css hack

因爲各瀏覽器對頁面的解析不一樣，會致使頁面在不一樣瀏覽器中顯示的樣式不一致，爲了保持頁面的統一，常常須要對瀏覽器進行兼容性問題的調試。

CSS Hack

面對瀏覽器諸多的兼容性問題，常常須要經過CSS樣式來調試，其中用的最多的就是CSS Hack。所謂CSS Hack就是針對不一樣的瀏覽器書寫不一樣的CSS樣式，經過使用某個瀏覽器單獨識別的樣式代碼，控制該瀏覽器的顯示效果。CSS Hack主要分爲兩類

CSS 選擇器Hack

CSS選擇器Hack是指經過在CSS選擇器的前面，加上一些只有特定瀏覽器才能識別的Hack前綴，來控制不一樣的CSS樣式。針對不一樣版本的瀏覽器，選擇器Hack分爲如下幾類：

（1）IE6及IE6如下版本識別的選擇器Hack

書寫CSS樣式時，若是但願此樣式只對IE6及IE6如下版本的瀏覽器生效，能夠使用IE6及如下版本的選擇器Hack，其基本語法以下：

* html 選擇器{樣式代碼}

（2）IE7識別的選擇器Hack

書寫CSS樣式時，若是但願此樣式只對IE7瀏覽器生效，能夠使用IE7識別的選擇器Hack，其基本語法以下：

*+html 選擇器{樣式代碼}

CSS屬性Hack

這裏小強老師，把屬性hack分爲 前綴屬性hack和 後綴屬性hack

CSS屬性Hack（前綴）	針對的瀏覽器
_color:red;	IE6及其如下的版本
*color:red ;或者 +color:red;	IE7及其如下的版本
CSS屬性Hack（後綴）	針對的瀏覽器
color:red\9;	IE6/IE7/IE8/IE9/IE10版本
color:red\0;	IE8/IE9/IE10版本
color:red\9\0;	IE9/IE10
color:red!important	IE7/IE8/IE9/IE10及其餘非IE瀏覽器

其實，如今愈來愈的公司，不太讓兼容ie6了，如今比較關心的是ie8.910等高版本的瀏覽器，所以這裏小強老師也總結了ie專屬hack ，好比ie8等。

選擇器Hack寫法	針對於的瀏覽器
@media screen\9{body { background: red; }}	只對IE6/7生效
@media \0screen {body { background: red; }}	只對IE8生效
@media \0screen\,screen\9{body { background: blue; }}	只對IE6/7/8有效
@media screen\0 {body { background: green; }}	只對IE8/9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }}	只對IE10有效

若是樣式比較多，條件註釋，是不錯的選擇：

IE條件註釋語句

IE條件註釋語句	針對的瀏覽器版本
<!--[if lt IE 7]>內容<![endif]-->	IE7 如下版本
<!--[if lte IE 7]>內容<![endif]-->	IE7及如下版本（包含IE7）
<!--[if gt IE 7]>內容<![endif]-->	IE7 以上版本
<!--[if gte IE 7]>內容<![endif]-->	IE7及以上版本（包含IE7）
<!--[if !IE 7]>內容<![endif]-->	非IE7版本
<!--[if !IE]><!-->您使用不是 Internet Explorer<!--<![endif]-->	非IE瀏覽器