CSS hack写法 收集版

Web前端不知何时能够抛弃IE6-IE7的兼容呢？
做项目时遇到一些不兼容IE6/7/8/9/10的事情应该如何来解决呢？
在网上搜索了一些css hack方法让自己熟记一下

1. “*”，兼容IE6/IE7
2. “+”，兼容IE7
3. “-“，兼容IE6
4. “important”，兼容IE6以上版本以及现代浏览器
5. “\9”，兼容所有IE版本，不支持现代浏览器
6. “\0”，兼容IE8,IE9,IE10版本
7. “\9\0”，兼容IE9,IE10版本

举个栗子~~
想要在IE中把背景颜色设为red，其他浏览器中背景颜色设为green，那么可以这样书写~

其他浏览器：background-color:green;IE：background-color:red\9;  

也要注意书写顺序哟~
先是全局的，后是兼容个例；
也可以设置IE6/IE7不同的样式

IE6：*background-color:green;IE6：-background-color:green;IE7：+background-color:red;  IE7：*background-color:red\9;  

“*”，是可以解决IE6/IE7的。
选择器hanck主要是针对IE浏览器，其实并不怎么常用，语法是这样的： selector{ sRules }

"*html",兼容IE6"*+html"，兼容IE7":root"，兼容IE9

针对IE9的hack可以这么写

:root .test{    background-color:green;}

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里的不等于判断符相同。

书写顺序：
看看，看看，这么多姿势，那么一个效果，好多种写法，什么顺序写才能保证各个浏览器都得到希望的效果呢？因为CSS只要是同一级别，出现重复属性设置，后出现的会覆盖前面出现的，所以在书写的时候一般把识别能力强的写前面，看个例子

_background-color:red;
background-color:green;
如果希望DIV在IE6上是红色，其它是绿色，上面的写法可不可以呢？试一下发现所有浏览器上都是绿色，因为在IE6解析的时候，第一句能够识别，背景设为红色，但是第二句所有浏览器都识别，IE6也不例外，背景颜色又被设为绿色，所以得反过来写

background-color:green;
_background-color:red;
总结出的规律就是：先一般，再特殊。有兴趣的同学可以试试试试下面CSS，看看和你想的效果是否一样

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

改变背景图片：
改变背景图片size

既然图片还得是这张图片，那么就改变它的大小，让其拉伸铺满整个网页，使用window在设壁纸的时候不经常这么干嘛，可可可怎么该背景图片的大小呢，用CSS3吧

background:url(images/bg.png);-moz-background-size:cover;-ms-background-size:cover;-webkit-background-size:cover;background-size:cover;

聪明的同学第一时间就会想到你让IE可咋整？是呀，江湖传言这样就可以

background:url(images/bg.png);-moz-background-size:cover;-ms-background-size:cover;-webkit-background-size:cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/bg.png,sizingMethod=scale);

哎呀妈呀，真好使

自己觉得很完美了，可可可，人家说你的效果已经不对了。
在IE下效果是对了，但是Chrome、Firefox下本来应该在中间的高亮区cover效果原因整个图片长宽都被拉伸而被移到了右上角，不对称了。。。

背景可以设为：background-attachment:fixed
但是用background-attachment这种方法没法保证背景是全屏的，还会出现衔接部分色差问题。
等了这么久主角CSS hack终于可以登场了，亏我没去学导演，主角要指定砍我，也不必太激动，刚才不是使用-moz-神马的了吗，也算是露脸儿了，这次让它领衔，看看怎么使用CSS hack让怪异模式的IE也能有类似于position:fixed的效果；

.cover        {            width: 100%;            height: 100%;            position: fixed;            z-index: -10;            _position: absolute;            _top: expression(eval(document.body.scrollTop));            _left: expression(eval(document.body.scrollLeft));        }

本来前缀”_”只有IE6能够认识，不过在怪异模式下所有IE都能认识，所以IE下hack代码会覆盖上面的代码，可以expression表达式了解一下，还有在怪异模式下document.documentElement.scrollHeight这样的写法是取不到正确结果的，得像上面document.body.scrollTop这么写；