CSS hack

了解：

之前一直很狭隘的对CSS hack持有偏见，觉得写得规范的代码不应该使用这些“邪门歪道”，可最近产品发布一个小问题却让我头疼了很久，最后查了一下资料，竟然使用CSS hack轻松解决了，不得不服啊，对付神奇的IE就得使用这些利器。

目录

了解：

什么是CSS hack

CSS 内部hack

选择器hack

 针对IE6的hack可以这么写

HTML头部引用 

书写顺序

---

什么是CSS hack

由于不同的浏览器，甚至同一浏览器的不同版本对CSS的解析认识不一样，导致生成的页面效果不一致，写出针对不同浏览器CSS code就称为CSS hack。

常用的CSS hack 有三种方式，CSS 属性hack、选择符hack、结构hack，其中第一种最常用。

CSS 内部hack

*background-color:green;

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

_background-color:green;

属性前面有个“-”这样的只有IE6识别，还有些在后面的hack

background-color:green!important;

这样在属性值后面添加“!important”的写法只有IE6不能识别，其它版本IE及现代浏览器都可以识别，还有“+”、“\0”、”\9” 等，

IE6	IE7	IE8	IE9	IE10	现代浏览器
*****	正在上传…重新上传取消​	正在上传…重新上传取消​
+		正在上传…重新上传取消​
-	正在上传…重新上传取消​
!important		正在上传…重新上传取消​	正在上传…重新上传取消​	正在上传…重新上传取消​	正在上传…重新上传取消​	正在上传…重新上传取消​
\9	正在上传…重新上传取消​	正在上传…重新上传取消​	正在上传…重新上传取消​	正在上传…重新上传取消​	正在上传…重新上传取消​
\0
\9\0

 属性hack (针对ie低版本)
                  _属性名:属性值;  ie6及其以下识别！！
                  *属性名：属性值;ie7及其以下识别
                  属性名:属性值\0; ie8-ie9识别

 

选择器hack

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

 

IE6	IE7	IE8	IE9	IE10	现代浏览器
*html	正在上传…重新上传取消​
*+html		正在上传…重新上传取消​
:root				正在上传…重新上传取消​

 针对IE6的hack可以这么写

* html  .test
{
    background-color:green;
}
* + html .b {

}
:root .c {

}

HTML头部引用 

HTML头部引用就比较特殊了，类似于程序语句，只能使用在HTML文件里，而不能在CSS文件中使用，并且只有在IE浏览器下才能执行，这个代码在非IE浏览下非单不是执行该条件下的定义，而是当做注释视而不见。

<!– 默认先调用css.css样式表 –>
<link rel="stylesheet" type="text/css" href="css.css" />
<!–[if IE 7]>
<!– 如果IE浏览器版是7,调用ie7.css样式表 –>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]–>
<!–[if lte IE 6]>
<!– 如果IE浏览器版本小于等于6,调用ie.css样式表 –>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]–>

lte：就是Less than or equal to的简写，也就是小于或等于的意思。

lt ：就是Less than的简写，也就是小于的意思。

gte：就是Greater than or equal to的简写，也就是大于或等于的意思。

gt ：就是Greater than的简写，也就是大于的意思。

! ：就是不等于的意思，跟javascript里的不等于判断符相同。

<!-- ie低版本 不想做兼容  咱们会给用户提示 您的浏览器版本太低了 请你升级到最新的浏览器版本  换电脑 -->

    <!-- 结构hack   针对ie10以下的ie版本创建的  主要是为了ie低版本识别特定的结构！！ 结构hack 
    ie10+废除了！！！

     ie8以下 ie8- 提示用户 显示p元素 对于其他版本的浏览器 都不需要识别！！！

     条件hack关系表达式:
       if lte IE 8 小于等于ie8满足条件
       if lt IE 8 小于ie8满足条件
       if gt IE 6 大于ie6满足条件
       if gte IE 6 大于或等于ie7满足条件
       if IE 7 就是ie7满足条件
       if ! IE 6  除了IE6满足条件

    -->

    <!--[if 条件]>只有在满足条件以后才会显示！！！<![endif]-->

    <!--[if  lte  IE  8]>
        <p>您的浏览器版本太低了 请你升级到最新的浏览器版本!!!</p>
    <![endif]-->

书写顺序

总结出的规律就是：先一般，再特殊

background-color:blue; /*所有浏览器*/
background-color:red\9;/*所有的ie*/
background-color:yellow\0; /* ie8+*/
+background-color:pink; /*+ ie7*/