IE等主流浏览器css hack，包括IE6,IE7,IE8,IE9,firefox,chrome
对于常用的hack，今天搜集了一下资料，好好的学习了一下，愚人码头的一个测试页面写得比较详尽，链接如下：http://www.fantxi.com/demo/html/browser_detector.html
然后我自己在本地进行了测试，沿用了愚人码头的背景配色，重写了css代码，最后还有一些额外的发现和收获。本次测试主要是针对IE6~IE9，firefox，chrome，opera，IE5.5如此古老的浏览器不在考虑之列。最后，特别注意的是：使用:root对IE9 hack的时候，还要在属性值后面加上”\0” or “\9”，否则FF和chrome下面和IE9的样式一样。而在opera下面只能加"\9",加"\0"的话跟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的时候，还要在属性值后面加上”\0” or “\9”，否则FF和chrome下面和IE9的样式一样。而在opera下面只能加"\9",加"\0"的话跟IE9效果相同</p>
</div>
</body>
</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的时候，还要在属性值后面加上”\0” or “\9”，否则FF和chrome下面和IE9的样式一样。而在opera下面只能加"\9",加"\0"的话跟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:#963\9; /* 仅IE9适用 */
}
.demo {
width: 300px;
height: 200px;
background: #036; /* 所有浏览器都适用 */
background: #09F\9; /* IE6~IE9 */
background: #09F\0; /* IE8~IE9 */
background: #09F\0/; /* 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;
}
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:#963\9; /* 仅IE9适用 */
}
.demo {
width: 300px;
height: 200px;
background: #036; /* 所有浏览器都适用 */
background: #09F\9; /* IE6~IE9 */
background: #09F\0; /* IE8~IE9 */
background: #09F\0/; /* 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;
}
background:#ccc;
}
