Hack方式解决浏览器兼容
Posted Autumn の Box
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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方式解决浏览器兼容的主要内容，如果未能解决你的问题，请参考以下文章