1.什么是 css hack ?
针对不同的浏览器写不同的CSS 代码的过程,就叫CSS Hack。
Hack就是只有特定浏览器才能识别这段hack代码。Hack 不是什么好东西,除非没有办法,我们尽量还是不要用它。
CSS Hack常见的有三种形式:CSS属性Hack、CSS选择符Hack以及IE条件注释Hack, Hack主要针对IE浏览器。
1)、属性级Hack:比如IE6能识别下划线”_”和星号” * “,IE7能识别星号” * “,但不能识别下划线”_”,而firefox两个都不能认识。
2)、选择符级Hack:比如IE6能识别*html .class{},IE7能识别*+html .class{}或者*:first-child+html .class{}。
3)、IE条件注释Hack:IE条件注释是微软从IE5开始就提供的一种非标准逻辑语句。比如
针对所有IE:<!–[if IE]><!–您的代码–><![endif]–>;
针对IE6及以下版本:<!–[if lt IE 7]><!–您的代码–><![endif]–>,这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都 会生效。
PS:条件注释只有在IE浏览器下才能执行,这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。
2.怎么用?
/* CSS属性级Hack */
color:red; /* 所有浏览器可识别*/
*color:red; /* IE6、IE7 识别 */
+color:red; /* IE6、IE7 识别 */
*+color:red; /* IE6、IE7 识别 */
[color:red; /* IE6、IE7 识别 */
color:red9; /* IE6、IE7、IE8、IE9 识别 */
color:red; /* IE8、IE9 识别*/
color:red9; /* 仅IE9识别 */
color:red ; /* 仅IE9识别 */
color:red!important; /* IE6 不识别!important*/
-------------------------------------------------------------
/* CSS选择符级Hack */
*html #demo { color:red;} /* 仅IE6 识别 */
*+html #demo { color:red;} /* 仅IE7 识别 */
body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 */
head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以识别 */
:root #demo { color:red9; } : /* 仅IE9识别 */
--------------------------------------------------------------
/* IE条件注释Hack */
<!--[if IE]>此处内容只有IE可见<![endif]-->
<!--[if IE 6]>此处内容只有IE6.0可见<![endif]-->
<!--[if IE 7]>此处内容只有IE7.0可见<![endif]-->
<!--[if !IE 7]>此处内容只有IE7不能识别,其他版本都能识别,当然要在IE5以上。<![endif]-->
<!--[if gt IE 6]> IE6以上版本可识别,IE6无法识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if lt IE 7]> 低于IE7的版本才能识别,IE7无法识别。 <![endif]-->
<!--[if lte IE 7]> IE7以及IE7以下版本可识别<![endif]-->
<!--[if !IE]>此处内容只有非IE可见<![endif]-->
3、IE6对!important的支持
!important一般用来做区分IE6和Firefox等浏览器的基本Hack手法。因为IE6不支持!important,而Firefox能读懂!important,其改变了样式的优先级。其实IE6在某些情况下,也能认识!important。
例如:
<style type="text/css">
.demo{
color:red !important;
color:green;
}
</style>
<div class="demo">www.jb51.net</div>
上面代码在FF下字体为红色、IE6下字体为绿色。说明IE6忽视!important的存在。
再来看看:
<style type="text/css">
.demo{ color:red !important; }
.demo { color:green; }
</style>
<div class="demo">www.jb51.net</div>
如果IE6不认!important的话,上面代码.demo的内容应该显示为绿色,可偏偏不是,.demo的内容显示为红色,说明IE6是认得!important的。
两种情况的区别就在于:当在一个选择器中,利用!important改变样式优先级的时候,IE6下是无效的,后面的样式覆盖了前面的,!important被彻底无视了,利用!import
4、IE6下的多选择符
多类选择符的写法。例如:
#my.c1.c2 { color:red;}
.c1.c2 { color:red;}
以上写法在IE7+/FF/Opera/Safari 等浏览器都支持。
但在IE6中,后一个类名会覆盖前一个类名,也就是说,上例被IE6理解为:
#my.c2 { color:red;}
.c2 { color:red;}
同理:
#my.c1.c2.c3 { color:red;}
IE6理解为 #my.c3 {color:red;}
.c1.c2.c3 { color:red;}
IE6理解为 .c3 { color:red; }
Webkit内核CSS hack(Chrome、Safari、Opera)。
注:很奇怪,在Windows10中的Edge(版本是13)下,竟然也起作用,莫非微软要向Webkit看齐?
@media screen and (-webkit-min-device-pixel-ratio:0) {
.demo {
/
这里写只在Webkit内核的浏览器下起作用的样式
/
}
}
Firefox CSS hack
@-moz-document url-prefix(){
.demo {
/*
这里写写只在firefox中起作用的样式
*/
}
}
IE8/9/10/11 CSS hack
@media screen\0 {
.demo{
/
这里写在IE 8 9 10 11下起作用的样式
/
}
}
IE6/7/8 CSS hack
@media \0screen\,screen\9 {
.demo{
/
这里写在IE 6 7 8 下起作用的样式
/
}
}
IE9/10 CSS hack
注:IE9/10能识别CSS属性值后面的\9\0,所以想要在IE9/10下表现出来的样式,可以在后面加\9\0即可
此hack有一个问题,即设置的所有属性在IE7下都不起作用,可以使用 IE6/7 的hack来修复一下
display: none\9\0;
IE6/7 CSS hack
注:IE6/7能识别CSS属性前面的 ,所以想要在IE6/7下表现出来的样式,可以在前面面加 即可
*display:none;
IE8 CSS hack
@media \0screen\,screen\9 {
.demo{
/
这里写在IE8 下起作用的样式
/
}
}
IE7 CSS hack
注:IE7的单独的CSS hack 必须结合着IE6的hack使用
*color:red;
_color:green;
IE6 CSS hack
_color:green;
结束语:在工作中有时候我需要单独使用IE9 hack,但是我并没有发现有IE9的hack,如果有那位同学知道的话麻烦告知我
我写了一个例子,大家可以拷贝到自己本地,使用各种浏览器测试一下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>测试CSS HACK</title>
<style type="text/css">
/ webkit css hack /
.webkit-hack{
color:green;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.webkit-hack {
color:red;
}
}
/ firefox css hack /
.firefox-hack{
color:green;
}
@-moz-document url-prefix(){
.firefox-hack{
color:red;
}
}
/ IE8/9/10/11 css hack /
.IE-hack{
color:green;
}
@media screen\0 {
.IE-hack{
color:red;
}
}
/ IE6/7/8 css hack /
.IE678-hack{
color:green;
}
@media \0screen\,screen\9 {
.IE678-hack{
color:red;
}
}
/
IE9/10 css hack
他有一个问题:
无法在IE7及以下起作用即在IE7及以下2个color都不起作用,文本显示为黑色
所以可以用IE6/7的hack修复一下
/
.IE910-hack{
color:green;
color:red\9\0;
color:green; / 修复一下,让IE6/7还是显示绿色 /
}
/ IE67 css hack /
.IE67-hack{
color:green;
color:red;
}
/ IE8 hack /
.IE8-hack{
color:green;
}
@media \0screen\,screen\9 {
.IE8-hack{
color:red;
*color:green;
}
}
/
IE7 css hack
听说在傲游浏览器下也起作用?
那位同学试一下,并且把起作用的傲游浏览器版本区间告诉我
/
.IE7-hack{
color:green;
color:red;
_color:green;
}
/ IE6 css hack */
.IE6-hack{
color:green;
_color:red;
}
</style>
</head>
<body>
<p class="webkit-hack">我在webkit内核浏览器下显示为红色,在其他非webkit内核浏览器下显示为绿色</p>
<p class="firefox-hack">我在firefox浏览器下显示为红色,在其他浏览器下显示为绿色</p>
<p class="IE-hack">我在IE8/9/10/11浏览器下显示为红色,在其他浏览器下显示为绿色</p>
<p class="IE678-hack">我在IE6/7/8浏览器下显示为红色,在其他浏览器下显示为绿色</p>
<p class="IE910-hack">我在IE9/10浏览器下显示为红色,在其他浏览器下显示为绿色</p>
<p class="IE67-hack">我在IE6/7浏览器下显示为红色,在其他浏览器下显示为绿色</p>
<p class="IE8-hack">我在IE8浏览器下显示为红色,在其他浏览器下显示为绿色</p>
<p class="IE7-hack">我在IE7浏览器下显示为红色,在其他浏览器下显示为绿色</p>
<p class="IE6-hack">我在IE6浏览器下显示为红色,在其他浏览器下显示为绿色</p>
</body>
</html>