一、浏览器内核简介
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-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: value9; }
IE9及IE9以下版本:
.selector { property:value9; }
IE8:
@media screen{
.selector { property:value; }
}
IE8及IE8以上版本:
.selector { property: value ; }
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]-->