对于常用的hack，今天搜集了一下资料，好好的学习了一下，愚人码头的一个测试页面写得比较详尽，链接如下：http://www.fantxi.com/demo/html/browser_detector.html
然后我自己在本地进行了测试，沿用了愚人码头的背景配色，重写了css代码，最后还有一些额外的发现和收获。本次测试主要是针对IE6~IE9，firefox，chrome，opera，IE5.5如此古老的浏览器不在考虑之列。最后，特别注意的是：使用:root对IE9 hack的时候，还要在属性值后面加上”” or “9”，否则FF和chrome下面和IE9的样式一样。而在opera下面只能加”9″,加””的话跟IE9效果相同。
这里是从晚上搜集的一张图片，主要是IE下的hack
本地demo的html代码：
<!
DOCTYPE html
>
<
html
>
<
head
>
</
head
>
<
body
>
<
h3
>css hack
</
h3
>
<
div
class
=”hack-box”
>
<
div
class
=”demo”
>
.demo的背景色会随浏览器的不同而变化哦，亲！
</
div
>
</
div
>
<
div
class
=”detail”
>
<
ol
>
<
li
>IE6, 测试区域背景色为:
<
span
style
=”background:#ccc”
>灰色(#ccc)
</
span
></
li
>
<
li
>IE7, 测试区域背景色为:
<
span
style
=”background:#f60″
>橘色(#f60)
</
span
></
li
>
<
li
>Opera 9.5-9.6/FF 3.51-FF4, 测试区域背景色为:
<
span
style
=”background:#f06″
>粉色(#f06)
</
span
></
li
>
<
li
>Safari,Google Chrome,Opera9.2, 测试区域背景色为:
<
span
style
=”background:#609″
>紫色(#609)
</
span
></
li
>
<
li
>IE8, 测试区域背景色为:
<
span
style
=”background:#09F”
>蓝色(#09F)
</
span
></
li
>
<
li
>IE9, 测试区域背景色为:
<
span
style
=”background:#963″
>咖啡色(#963)
</
span
></
li
>
</
ol
>
<
p
class
=”attention”
>使用:root对IE9 hack的时候，还要在属性值后面加上”” or “9”，否则FF和chrome下面和IE9的样式一样。而在opera下面只能加”9″,加””的话跟IE9效果相同
</
p
>
</
div
>
</
body
>
</
html
>
css代码如下：
body {
text-align:
center;
}
.hack-box {
margin:
0 auto;
width:
300px;
height:
200px;
border:
3px solid #999;
}
.detail {
margin:
0 auto;
width:
400px;
}
.attention {
font-weight:
bold;
font-size:
20px;
}
:root .demo {
background:
#9639;
/*
仅IE9适用
*/
}
.demo {
width:
300px;
height:
200px;
background:
#036;
/*
所有浏览器都适用
*/
background:
#09F9;
/*
IE6~IE9
*/
background:
#09F;
/*
IE8~IE9
*/
background:
#09F/;
/*
IE8
*/
*background:
#F60;
/*
IE6/IE7
*/
+background:
#F60;
/*
IE6/IE7
*/
@background:
#F60;
/*
IE6/IE7
*/
>background:
#F60;
/*
IE6/IE7
*/
_background:
#ccc;
/*
IE6
*/
}
@media all and (min-width:0) {
.demo {
background:
#F06;
/*
webkit and opera
*/
}
}
@media screen and (-webkit-min-device-pixel-ratio:0){
.demo {background:
#609;}
/*
webkit (& Opera9.2)
*/
}
ol {
list-style-type:
none;
text-align:
left;
}
最后还有一个针对safari和chrome的hack:
body:nth-of-type(1) #selector{
background:
#ccc;
}
