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;
}
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异