CSSHack 兼容性

史上最全的CSS hack方式一览    CSS hack技巧大全    Can i use

CSS hack

CSS hack

由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!

.bb{
height:32px;
background-color:#f1ee18;           /*所有识别*/
.background-color:#00deff\9;        /*IE6、7、8识别*/
+background-color:#a200ff;          /*IE6、7识别*/
_background-color:#1e0bd1;         /*IE6识别*/
}

@media screen and (-webkit-min-device-pixel-ratio:0){.bb{background-color:#f1ee18}}{}  /*safari(Chrome) 有效 */

.bb, x:-moz-any-link, x:default{background-color:#00ff00;}            /*IE7 firefox3.5及以下 识别 */
@-moz-document url-prefix(){.bb{background-color:#00ff00;}}       /* 仅firefox 识别 */
* +html .bb{background-color:#a200ff;}                                       /* 仅IE7 识别 */

兼容

CSS

filter 属性：

-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
    filter: blur(5px);

 

 

HTML

HTML5的语义化标签

让IE也支持HTML5语义化标签

一种解决方案就是用js将HTML5增加的标签创建出来，就像下面这样。

<script>
var html5Tags=['header' ,'footer','article','nav' ,'section','aside']
for(var i=0;i<html5Tags.length;i++){
    document.createElement(html5Tags[i]);
}
</script>

实际上已经有人这么做了并分享在Google code project上方便大家直接调用。于是，我们可以使用IE条件注释来调用这个js文件，这样像FireFox等非IE浏览器就会忽视这段代码，也就不会有无谓的http请求了。

<!--[if lte IE 9]>
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->