转载于： http://www.cnblogs.com/WuQiang/archive/2011/08/23/2150240.html
在这个浏览器百花争鸣的时代，作为前端开发的我们为了我们漂亮的设计能适应各个浏览器可为煞费苦心，主要体现在javascript和css上面。javascript我这次就不谈了，先说说css。
为了适应不同浏览器不同的版本（版本主要就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>
上面这段代码大家可以直接copy出来，保存成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 兼容大全 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识别，用于在属性...