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,如下:


在开发过程中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,如下:



工作中常用的IE hack如下:

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

你可能感兴趣的:(css常见的hack处理)