css常见的hack处理

一句话总结： 各大浏览器最新版几乎都支持W3C标准，但日常开发用到CSS3属性的时候建议加上前缀，以向前兼容老版本的浏览器。

栗子：

transform-style: preserve-3d;　　　　    /*W3C标准*/

-webkit-transform-style: preserve-3d;   /*chrome safari*/

-moz-transform-style: preserve-3d;      /*firefox*/

-0-transform-style: preserve-3d;          /*opera*/

IE系列中,IE9及以上对HTML5支持都不错了。但是IE678还是有很大的问题，主要就是不支持HTML5的新标签，这个问题我认为比较好的解决方案就是html5shiv.js，如下：

<!--[if lt IE 9]>
<script type="text/javascript"  src="http://www.ijquery.cn/js/html5shiv.js"></script>
<![endif]-->

在开发过程中IE 6 7 还有一些内容是会产生不兼容。

比如：我们平时写导航栏的时候，可能会用到display： inline-block；但是用完以后发现IE6 7 不支持inline-block这个属性。那我只好在代码中添加+display: inline; 然后再用+zoom:1做缩放。虽然和inline-block还是有点不一致的地方，但是整体来说还是可以的。这个前缀+只能被IE 67识别，其他版本浏览器都不会识别这句CSS代码。

display: inline-block;
+display: inline; /*for IE6、7*/
还有其他前缀，例如 IE6专属前缀“-”   -display：inline;
前缀"*"  *display:inline; /*IE6 7*/

除了添加前缀，还可以用条件注释hack，如下：

<!--[if IE 6]> 仅IE6可识别
　　您的代码
<![endif]-->
<!--[if lt IE 9]> IE9以下版本可识别
　　您的代码
<![endif]-->

工作中常用的IE hack如下：

.div{
　　 width: 100px;
    height: 100px;
    background:green\0;     /* IE 8 9 10专属*/
    background:red\0\9;     /*IE 9 10专属*/
    background:red;           /*W3C标准*/
}