一、CSS hack的目的就是使你的CSS代码兼容不同的浏览器。
CSS Hack大致有3种表现形式,CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack
CSS Hack主要针对类内部Hack:比如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",而firefox两个都不能认识。等等
选择器Hack:比如 IE6能识别*html .class{},IE7能识别*+html .class{}或者*:first-child+html .class{}。等等
HTML头部引用(if IE)Hack:针对所有IE:<!--[if IE]><!--您的代码--><![endif]-->,针对IE6及以下版本:<!--[if lt IE 7]><!--您的代码--><![endif]-->,这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。
(1)方式一 条件注释法
只在IE下生效
<!--[if IE]>
这段文字只在IE浏览器显示
<![endif]-->
只在IE6下生效
<!--[if IE 6]>
这段文字只在IE6浏览器显示
<![endif]-->
只在IE6以上版本生效
<!--[if gte IE 6]>
这段文字只在IE6以上(包括)版本IE浏览器显示
<![endif]-->
只在IE8上不生效
<!--[if ! IE 8]>
这段文字在非IE8浏览器显示
<![endif]-->
非IE浏览器生效
<!--[if !IE]>
这段文字只在非IE浏览器显示
<![endif]-->
(2)方式二 类内属性前缀法
-
“-″减号是IE6专有的hack
-
“9″ IE6/IE7/IE8/IE9/IE10都生效
-
“ ″ IE8/IE9/IE10都生效,是IE8/9/10的hack
-
“9 ″ 只对IE9/IE10生效,是IE9/10的hack
CSS hack方式三:选择器前缀法
选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器,在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
目前最常见的是
*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen9{...}只对IE6/7生效
@media screen {body { background: red; }}只对IE8有效
@media screen\,screen9{body { background: blue; }}只对IE6/7/8有效
@media screen {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-0 ) {body { background: gray; }}只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body {background: orange; }} 只对IE10有效等等
网上很多资料中常常把!important也作为一个hack手段,其实这是一个误区。!important常常被我们用来更改样式,而不是兼容hack。造成这个误区的原因是IE6在某些情况下不主动识别!important,以至于常常被人误用做识别IE6的hack。可是,大家注意一下,IE6只是在某些情况下不识别(ie6下,同一个大括号里对同一个样式属性定义,其中一个加important 则important标记是被忽略的,例:{background:red!important; background:green;} ie6下解释为背景色green,其它浏览器解释为背景色red;如果这同一个样式在不同大括号里定义,其中一个加important 则important发挥正常作用,例:div{background:red!important} div{background:green},这时所有浏览器统一解释为背景色red。)
二、根据浏览器内核做兼容性
主要需要兼容的内核有:Trident、Gecko、Webkit、Chromimum(基于Webkit)
Trident:IE浏览器 -ms-
Gecko:火狐浏览器 -moz-
Webkit:safari、chrome、opera
Chromimum:世界之窗浏览器(极速版)、360极速浏览器、猎豹浏览器、搜狗高速浏览器
safari、chrome -webkit-
opera -o-
注意:在做网站兼容时,webkit内核与chromimum内核其实是一样的,每中内核只需要派出一个浏览器就可以了
在判断时否是IE浏览器时:
if(window.addEventListener){
console.log("这是非IE浏览器");
}else if(window.attachEvent){
console.log("这是IE浏览器");
}