Hack方式解決瀏覽器兼容
一、瀏覽器內核簡介
Trident內核:IE,MaxThon,TT,The World,360,搜狗瀏覽器等
Gecko內核:Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等
Presto內核:Opera7及以上
Webkit內核:Safari,Chrome等
二、解決IE不支持HTML5的方法:
方法一:在<head></head>部分引用Google的 html5.js 文件
<!--[if lt IE 9]>
<script src="/html5.js"></script>
<![endif]-->
方法二:使之成為塊級元素,在CSS中加上修飾
/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block;}
方法三:JavaScript代碼
document.createElement("elementName").style.display = "block";
三、各瀏覽器下Hack方式的寫法:
Firefox:
@-moz-document url-prefix() {
.selector { property: value; }
}
支持Firefox的其他寫法:
#selector[id=selector] { property: value; } /*支持所有Firefox版本*/
*>.selector { property: value; }
Webkit(Chrome、Safari):
@media screen and (-webkit-min-device-pixel-ratio:0) {
.selector { property: value; }
}
Opera:
@media all and (min-width:0) {
.selector { property: value; }
}
或:
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
head~body .selector { property: value; }
}
或:
html:first-child>body .selector { property:value; }
IE9:
:root .selector { property: value\9; }
IE9及IE9以下版本:
.selector { property:value\9; }
IE8:
@media \0screen{
.selector { property:value; }
}
IE8及IE8以上版本:
.selector { property: value\0; }
IE7:
*+html .selector{ property:value; }
或 *:first-child+html .selector { property:value; }
IE7及IE7以下版本:
.selector { *property: value; }
IE6:
.selector { _property/**/:/**/value; }
或 .selector { _property: value; }
或 *html .selector { property: value; }
Hack方式解決瀏覽器兼容