史上最全的css hack（ie6-9,firefox,chrome,opera,safari）
在这个浏览器百花争鸣的时代，作为前端开发的我们为了我们漂亮的设计能适应各个浏览器可为煞费苦心，主要体现在javascript和css上面。javascript我这次就不谈了，先说说css。
上面这段代码大家可以直接copy出来，保存成html在各浏览器试试。下面我来分析下：
为了适应不同浏览器不同的版本（版本主要就ie来说），ie这朵奇葩现在我们要兼容6-9，它的10也快出来了。。。在ie下我们可以写条件注释来区分ie和其他浏览器，以及ie的版本，这些请大家自行google。这篇文章主要讨论的是css hack。下面废话补多说了，直接上代码
<!DOCTYPE html>
<html>
<head>
<title>Css Hack</title>
<style>
#test
{
width:300px;
height:300px;
background-color:blue; /*firefox*/
background-color:red\9; /*all ie*/
background-color:yellow\0; /*ie8*/
+background-color:pink; /*ie7*/
_background-color:orange; /*ie6*/
}
:root #test { background-color:purple\9; } /*ie9*/
@media all and (min-width:0px){ #test {background-color:black\0;} } /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome and safari*/
</style>
</head>
<body>
<div id="test">test</div>
</body>
</html>
<html>
<head>
<title>Css Hack</title>
<style>
#test
{
width:300px;
height:300px;
background-color:blue; /*firefox*/
background-color:red\9; /*all ie*/
background-color:yellow\0; /*ie8*/
+background-color:pink; /*ie7*/
_background-color:orange; /*ie6*/
}
:root #test { background-color:purple\9; } /*ie9*/
@media all and (min-width:0px){ #test {background-color:black\0;} } /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome and safari*/
</style>
</head>
<body>
<div id="test">test</div>
</body>
</html>
background-color:blue; 各个浏览器都认识，这里给firefox用；
background-color:red\9;\9所有的ie浏览器可识别；
background-color:yellow\0; \0 是留给ie8的，但笔者测试，发现最新版opera也认识，汗。。。不过且慢，后面自有hack写了给opera认的，所以，\0我们就认为是给ie8留的；
+background-color:pink; + ie7定了；
_background-color:orange; _专门留给神奇的ie6；
:root #test { background-color:purple\9; } :root是给ie9的，网上流传了个版本是 :root #test { background-color:purple\0;}，呃。。。这个。。。，新版opera也认识，所以经笔者反复验证最终ie9特有的为:root 选择符 {属性\9;}
@media all and (min-width:0px){ #test {background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera，必须加个\0,不然firefox，chrome，safari也都认识。。。
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。
好了就这么多了，特别注意以上顺序是不可以改变的。css hack虽然可以解决个浏览器之间css显示的差异问题，但是毕竟不符合W3C规范，我们平时写css最好是按照标准来，这样对我们以后维护也是大有好处的，实在不行再用。
如果给位看官有更好的css hack写法或者本文有不妥之处，欢迎留言，第一次写文章，请轻砸。
==============================================================================
CSS hack方式一：条件注释法
这种方式是IE浏览器专有的Hack方式，微软官方推荐使用的hack方式。举例如下
只在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]-->
CSS hack方式二：类内属性前缀法
属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。
IE浏览器各版本 CSS hack 对照表
| hack | 写法 | 实例 | IE6(S) | IE6(Q) | IE7(S) | IE7(Q) | IE8(S) | IE8(Q) | IE9(S) | IE9(Q) | IE10(S) | IE10(Q) |
| * | *color | 青色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
| + | +color | 绿色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
| - | -color | 黄色 | Y | Y | N | N | N | N | N | N | N | N |
| _ | _color | 蓝色 | Y | Y | N | Y | N | Y | N | Y | N | N |
| # | #color | 紫色 | Y | Y | Y | Y | N | Y | N | Y | N | Y |
| \0 | color:red\0 | 红色 | N | N | N | N | Y | N | Y | N | Y | N |
| \9\0 | color:red\9\0 | 粉色 | N | N | N | N | N | N | Y | N | Y | N |
| !important | color:blue !important;color:green; | 棕色 | N | N | Y | N | Y | N | Y | N | Y | Y |
说明：在标准模式中
- “-″减号是IE6专有的hack
- “\9″ IE6/IE7/IE8/IE9/IE10都生效
- “\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
- “\9\0″ 只对IE9/IE10生效，是IE9/10的hack
demo
<script type="text/javascript">
//alert(document.compatMode);
</script>
<style type="text/css">
body:nth-of-type(1) .iehack{
color: #F00;/* 对Windows IE9/Firefox 7+/Opera 10+/所有Chrome/Safari的CSS hack ，选择器也适用几乎全部Mobile/Linux/Mac browser*/
}
.demo1,.demo2,.demo3,.demo4{
width:100px;
height:100px;
}
.hack{
/*demo1 */
/*demo1 注意顺序，否则IE6/7下可能无法正确显示，导致结果显示为白色背景*/
background-color:red; /* All browsers */
background-color:blue !important;/* All browsers but IE6 */
*background-color:black; /* IE6, IE7 */
+background-color:yellow;/* IE6, IE7*/
background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */
background-color:purple\0; /* IE8, IE9, IE10 */
background-color:orange\9\0;/*IE9, IE10*/
_background-color:green; /* Only works in IE6 */
*+background-color:pink; /* WARNING: Only works in IE7 ? Is it right? */
}
/*可以通过javascript检测IE10，然后给IE10的<html>标签加上class=”ie10″ 这个类 */
.ie10 #hack{
color:red; /* Only works in IE10 */
}
/*demo2*/
.iehack{
/*该demo实例是用于区分标准模式下ie6~ie9和Firefox/Chrome的hack，注意顺序
IE6显示为：绿色，
IE7显示为：黑色，
IE8显示为：红色，
IE9显示为：蓝色，
Firefox/Chrome显示为：橘色，
（本例IE10效果同IE9,Opera最新版效果同IE8）
*/
background-color:orange; /* all - for Firefox/Chrome */
background-color:red\0; /* ie 8/9/10/Opera - for ie8/ie10/Opera */
background-color:blue\9\0; /* ie 9/10 - for ie9/10 */
*background-color:black; /* ie 6/7 - for ie7 */
_background-color:green; /* ie 6 - for ie6 */
}
/*demo3
实例是用于区分标准模式下ie6~ie9和Firefox/Chrome的hack，注意顺序
IE6显示为：红色，
IE7显示为：蓝色，
IE8显示为：绿色，
IE9显示为：粉色，
Firefox/Chrome显示为：橘色，
（本例IE10效果同IE9，Opera最新版效果也同IE9为粉色）
*/
.element {
background-color:orange; /* all IE/FF/CH/OP*/
}
.element {
*background-color: blue; /* IE6+7, doesn't work in IE8/9 as IE7 */
}
.element {
_background-color: red; /* IE6 */
}
.element {
background-color: green\0; /* IE8+9+10 */
}
:root .element { background-color:pink\0; } /* IE9+10 */
/*demo4*/
/*
该实例是用于区分标准模式下ie6~ie10和Opera/Firefox/Chrome的hack，本例特别要注意顺序
IE6显示为：橘色，
IE7显示为：粉色，
IE8显示为：黄色，
IE9显示为：紫色，
IE10显示为：绿色，
Firefox显示为：蓝色，
Opera显示为：黑色，
Safari/Chrome显示为：灰色，
*/
.hacktest{
background-color:blue; /* 都识别，此处针对firefox */
background-color:red\9; /*all ie*/
background-color:yellow\0; /*for IE8/IE9/10 最新版opera也认识*/
+background-color:pink; /*for ie6/7*/
_background-color:orange; /*for ie6*/
}
@media screen and (min-width:0){
.hacktest {background-color:black\0;} /*opera*/
}
@media screen and (min-width:0) {
.hacktest { background-color:purple\9; }/* for IE9/IE10 PS:国外有些习惯常写作\0，根本没考虑Opera也认识\0的实际 */
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.hacktest { background-color:green; } /* for IE10+ 此写法可以适配到高对比度和默认模式，故可覆盖所有ie10的模式 */
}
@media screen and (-webkit-min-device-pixel-ratio:0){ .hacktest {background-color:gray;} } /*for Chrome/Safari*/
/* #963棕色 :root is for IE9/IE10, 优先级高于@media, 慎用！如果二者合用，必要时在@media样式加入 !important 才能区分IE9和IE10 */
/*
:root .hacktest { background-color:#963\9; }
*/
</style>
================================================================================
CSS hack方式三：选择器前缀法
选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
目前最常见的是
*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
相关推荐
CSS 兼容大全 IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari 等浏览器 CSS 兼容大全是指在不同的浏览器中，例如 IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari 等，如何使网页正常显示的技术。这个技术的核心是 CSS Hack，即...
"IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表" 提供了一个宝贵的资源，帮助开发者解决在不同浏览器之间存在的CSS样式差异。下面我们将深入探讨这个话题，了解各种CSS hack及其在这些浏览器中的表现。 ...
标题和描述中的文档"css兼容与差别 IE6,IE7,IE8,FireFox,Opera,Safari.doc"主要探讨的是如何解决这些浏览器中的CSS兼容性问题。 1. **浮动(float)**：在示例代码中，我们可以看到针对不同浏览器的浮动样式设置。`...
本文将详细介绍如何区分IE6至IE10、Firefox、Chrome以及Opera这些主流浏览器，并根据它们各自的特性编写相应的CSS Hack代码。 ### IE浏览器的CSS Hack 由于IE浏览器的市场占有率高，且与其他浏览器的CSS兼容性差异...
这里我们将深入探讨标题中提到的`ie6`到`ie10`以及`Firefox`和`Google Chrome`浏览器的兼容性问题，以及它们所基于的`Gecko`和`WebKit`内核。 首先，`IE6`至`IE10`是微软公司推出的一系列Internet Explorer浏览器，...
首先，我们了解下主要的浏览器：IE（Internet Explorer）、Firefox、Chrome、Safari以及Opera。它们之间的兼容性问题主要源于对CSS规范的不同理解和实现，特别是早期版本的IE。 1. **IE浏览器的CSS Hack** - IE6和...
Webkit阵型则涵盖Firefox、Chrome、Safari和Opera等，它们遵循更现代的CSS标准。 **国内与国外的浏览器使用情况** 在中国，由于历史原因，Windows操作系统和IE浏览器的广泛使用导致大部分用户倾向于使用基于IE内核...
浏览器内核是解析和渲染网页内容的核心组件，常见的有Trident（IE）、Gecko（Firefox）、Webkit（Safari, Chrome）和Blink（Chrome, Opera）。每种内核对CSS的解析方式和对新特性的支持程度都有所不同，导致了CSS ...
本文主要探讨如何使用CSS实现这一功能，并确保兼容性覆盖到主流浏览器，包括IE、Firefox、Chrome、Opera以及Safari。下面我们将详细讨论CSS中的滤镜（filters）属性，以及如何通过不同的前缀和非标准方法来实现跨...
在上面的代码中，如果用户使用的是 Firefox、Chrome、Opera 或 Safari 浏览器，那么将跳转到指定的 URL 否则，将跳转到另外的 URL。 浏览器兼容性处理是 Web 开发中一个非常重要的问题，因为不同的浏览器可能会有...
在现代浏览器中，如Chrome、Firefox、Safari、Opera以及更新版本的IE，`border-radius`的兼容性已经相当好。但对于IE6，由于其支持的CSS版本较低，自然无法直接理解并应用这个属性。 为了让IE6能够实现圆角效果，...
而Webkit阵营则包括Firefox、Chrome、Safari和Opera等，其中Chrome的市场份额已超过IE。 由于中国市场的特殊性，许多国内用户仍然使用IE内核的浏览器，尤其是旧版本。然而，随着技术的发展，一些新版本的国产浏览器...
然而，针对IE6、IE7、Firefox、Chrome、Opera等其他浏览器的兼容性问题，我们需要使用更复杂的CSS Hack。以下是一个示例： ```css .t1 { color: #000000; *color: #0000FF; /* 仅IE7识别 */ _color: #66CCCC; /*...
1. 浏览器兼容性：不同浏览器对CSS的支持程度和解析方式存在差异，如IE、Firefox、Chrome、Safari和Opera等。CSS Hack帮助开发者解决这些差异，确保网站在所有主流浏览器中的表现一致。 2. CSS版本差异：CSS规范...
本文将详细讨论如何在不同浏览器中，特别是IE5.5至IE8及Firefox 3、Thunderbird（TT）、Maxthon 2.1.5、Opera 9.6和Safari 4.0中实现纯CSS的圆角效果。 首先，我们来看CSS3中的border-radius属性，这是实现圆角效果...
而在Firefox中，由于它默认支持文本自动换行，所以通常不需要额外的CSS hack。但如果需要通过JavaScript来实现，可以使用以下脚本： ```html function toBreakWord(intLen, id) { var obj = document....
- `-moz-`前缀针对Firefox：`.element {-moz-property: value; }` - `-o-`前缀针对Opera：`.element {-o-property: value; }` 3. 选择器Hack：利用某些浏览器不支持的CSS选择器，为这些浏览器编写特定样式，例如...
- **IE8, Firefox, Safari, Opera (除了IE6,7)** ```css html > /**/ body #cuatro { color: red; } ``` - **Opera 9.27及以下, Safari 2** ```css html :first-child #cinco { color: red; } ``` - **Safari ...
- 不同浏览器对新特性的支持程度不同，比如`-webkit-`用于Chrome和Safari，`-moz-`用于Firefox，`-ms-`用于IE，`-o-`用于Opera。 3. **零宽度字符（Zero-width Characters）** - 如`\9`，仅IE6-8识别，用于在属性...