CSS hack(各个浏览器兼容问题)

什么是CSS  Hack?

           由于不同厂商的浏览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器

的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对

不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS Hack。

CSS Hack的分类

CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对

IE浏览器不同版本之间的表现差异而引入的。

        属性前缀法：    例如IE6能识别下划线“_”和星号“ * ”，IE7能识别星号“ * ”，但不能识别下划线“_”,IE6~IE10都认识"\9",但火狐这三个都不认识.

选择器前缀法：例如IE6能识别*html.class{},IE7能识别*+html.class{}或者*.first-child+html.class{}。

        IE条件注释法：针对所有IE（注：IE10+已经不再支持条件注释）：<!--[if IE]>IE浏览器显示的内容<![endif]-->,针对IE6及以下版本：<!--[if it IE 6]>                                  只在IE6显示的内容<![endif]-->。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效

一、属性前缀法

 

    IE6IE7IE8IE9IE10现代浏览器*    +     -     !important \9 \0   \9\0    

      例如： *background-color : green;

              属性前面加个“*”这样的写法只会对IE6、7生效，其它版本IE及现代浏览器会忽略这条指令（没有特殊说明，本文所有hack都是指在声明了

 DOCTYPE的文档的效果）

二、选择器前缀法

选择器hanck主要是针对IE浏览器，其实并不怎么常用，语法是这样的：<hack> selector{ sRules }

 IE6IE7IE8IE9IE10现代浏览器*html     *+html     :root     

针对IE9的写法可以这样写

      :root   .test

      {

             background-color:green;

       }

三、 IE条件注释法

只在IE下生效<!--[if IE]>这段文字只在IE浏览器显示<![endif]-->只在IE6下生效<!--[if IE 6]>这段文字只在IE6浏览器显示<![endif]-->只在IE6以上版本生效<!--[if gte IE 6]>这段文字只在IE6以上(包括)版本IE浏览器显示<![endif]-->只在IE8上不生效<!--[if ! IE 8]>这段文字在非IE8浏览器显示<![endif]-->非IE浏览器生效<!--[if !IE]>这段文字只在非IE浏览器显示<![endif]-->