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：
/*Firefox 3+*/
@-moz-document url-prefix() {
.selector { property: value; }
}
/*Firefox 4+*/
@media screen and (min--moz-device-pixel-ratio:0) {
.selector { property:value; }
}
Webkit（Chrome、Safari）：
/*Chrome、Safari 3+*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
.selector { property: value; }
}
/*Chrome 24 、Safari 5*/
::made-up-pseudo-element,.selector {
.selector { property:value; }
}
/*iPhone、mobile webkit*/
@media screen and (max-device-width:480px) {
.selector { property:value; }
}
Opera：
/*Opera、IE 8/9/10*/
@media screen {
.selector { property: value; }
}
/*Opera 12*/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
head~body .selector { property: value; }
}
/*Opera 9.5+*/
noindex:-o-prefocus, .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方式的三种写法：
属性前缀法：
IE都能识别星号“*”，标准浏览器（如Firefox）不能识别星号“*”
.selector {
color:red;
*color:green;
}
IE6能识别下划线"_”和星号“*”，IE7能识别星号“*”但不能识别下划线"_"；
.selector {
color:red;
*color:green;
_color:blue;
}
IE6能识别星号“*”，但不能识别“!important”，IE7能识别星号“*”，也能识别“!important”；
.selector {
color:red !important;
color:green;
}
Firefox不能识别星号“*”、下划线“_”，但能识别“!important”；
.selector {
color:red;
*color:green !important;
*color:blue;
}
选择器前缀法：
IE6能识别*html .class{}
*html .selector {
color:red;
}
IE7能识别*+html .class{}或者*:first-child+html .class{}
*+html .selector {
color:red;
}
*:first-child+html .selector {
color:red;
}
IE8-9
html>/**/body .selector {
color:red;
}
IE9+
:root .selector {
color:red;
}
IE条件注释法：
IE10+已经不再支持条件注释，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效；
<!--[if IE]>
这段文本只在IE浏览器显示
<![endif]-->
<!--[if gt IE 5.0]>
这段文本只在IE5.0及以上IE5.X浏览器显示
<![endif]-->
<!--[if IE 6]>
这段文本只在IE6浏览器显示
<![endif]-->
<!--[if gte IE 6]>
这段文本只在IE6及以上版本浏览器显示
<![endif]-->
<!--[if ! IE]>
这段文本只在非IE浏览器显示
<![endif]-->
