CSS hack的实现方式及Windows系统下各浏览器常用CSS hack汇总表

W3C CSS2.1 标准也规定了浏览器应当支持的特性属性或值。
虽然如此，W3C也不可能强制浏览器厂商必须遵循标准。因此就出现了各大厂商对标准的实现不尽相同的现象。由于不同的浏览器，比如IE6、 IE7、 IE8、 Firefox等，对CSS解析的标准不同，因此对于相同的 CSS代码，可能会生成不同的页面效果，从而无法在所有浏览器中得到我们想要的效果。这时，我们就需要针对不同的浏览器去写不同的CSS代码，让它能够在所有浏览器中获得相同的效果。这个过程，就是CSS hack。也就是写出只有个别浏览器或某些浏览器识别的CSS代码。
CSS hack是因为现有浏览器对标准的解析不同，为了兼容各浏览器，所采用的一种补救方法。
CSS hack是一种类似作弊的手段，以欺骗浏览器的方式达到兼容的目的，是用浏览器的兼容性差异来解决浏览器的兼容性问题。
因此，在设计之初，写CSS hack需要遵循以下三条原则：
  ⃟有效： 能够通过 Web 标准的验证
  ⃟只针对太古老的/不再开发的/已被抛弃的浏览器， 而不是目前的主流浏览器
  ⃟代码要丑陋。让人记住这是一个不得已而为之的 Hack, 时刻记住要想办法去掉它。
现在很多hacks已经抛弃了最初的原则，而滥用hack会导致浏览器更新之后产生更多的兼容性问题。
因此，并不推荐使用CSS hack来解决兼容性问题。

CSS hack的实现方式

我总结了一下，实现CSS hack大概有以下几种方式：
1. 利用浏览器对相同代码的解析和支持的不同实现的hack
不同浏览器对相同的CSS代码的支持情况可能不同。尤其是对错误的写法。
例如，

CSS code

#test { _width : 80px ; }

在IE7及以上版本的浏览器中会被当作错误特性而舍弃，但是在IE6中可以被正常的解析。这时候，可以把_width当作hack，专门针对 IE6来设置元素的宽度。
2. 以Firefox或Webkit特有的扩展样式实现的hack
以-moz或-webkit开头的扩展样式，是浏览器对CSS标准的扩展。这些特性只在相应的浏览器里才可以被正常的解析。 因此可以被当作CSS hack来使用。
以-moz开头的Firefox特有扩展样式
Mozilla浏览器支持的一些扩展是以-moz开头的。这些扩展包括了一些功能，例如圆形边界等。这种CSS只适用于Mozilla浏览器。
比如，-moz-opacity是在Firefox2.0版本出现的特性，用来实现元素的透明，但Firefox3.0以后的版本中不再支持，而是直接支持标准中的opacity特性。而其他浏览器不支持-moz-opacity。所以，可以使用-moz-opacity来针对Firefox2.0设置元素的透明度。
关于Firefox扩展样式的详细信息，见Mozilla CSS Extensions。
以-webkit开头的Webkit浏览器特有扩展样式
与以-moz开头的Firefox特有扩展样式相同，以-webkit开头的样式是 Webkit浏览器特有的，只有Webkit浏览器可以解析。
比如，在Webkit浏览器中可以用 -webkit-border-radius实现圆角。
3. 利用IE对标准的支持缺陷写的CSS hack
这个类别以中的hack以IE对标准的支持缺陷为基础，可以让CSS代码针对IE6或IE7以外的浏览器生效。
例如，!important只有IE7及以上版本的IE及其他浏览器支持，所以，可以用!important来针对IE6以外的浏览器写 CSS代码；再如，head:first-child+body selector，:first-child不被IE6支持，所以可以用来针对IE6以外的浏览器编写CSS代码。
此处不在一一列举。
当然，有的观点认为应用CSS2.1标准，不属于CSS hack。见Tantek's Thoughts，Using A CSS2 Feature Is NOT a Hack。
4. 以IE特有的条件注释为基础的hack
IE浏览器中特有的条件注释也经常被用作 hack，可以针对特定版本的IE写CSS代码。
例如，测试用例：

HTML code

<!-- [if IE 8]><style type="text/css"> #test { color: red; }</style><![endif] --> < h1 id ="test" > TEXT </ h1 >

以上代码中的 "TEXT"，只在IE8中才会是红色。

我结合上表，又收集了一下网上较为常用的的CSS hack，整理出一个Windows系统下各浏览器常用CSS hack汇总表，如下：
说明：
1. 此汇总表中测试浏览器的版本为
o IE6
o IE7
o IE8
o Firefox 3.6.6
o Safari 5.0
o Chrome 6.0.458.1 dev
o Opera 10.60
2. 其中，多数CSS hack是在selector{property:value;}基础上更改的。selector代表CSS选择器，property代表CSS特性，value代表特性的值。
3. FF代表Firefox，Ch代表Chorme，Sa代表Safari，Op代表Opera
4. Q代表Quirks Mode，S代表Standards Mode。
5. Hack Type列的数字，指的是上面CSS hack的实现方式中的列表号。1是指“利用浏览器对相同代码的解析和支持的不同实现的hack”，2是指以Firefox或Webkit特有的扩展样式实现的hack。

其中 *+html selector 的测试用例：

HTML code

< style type ="text/css" > *+html #test { color : red ; } </ style > < h1 id ="test" > TEXT </ h1 >

其他测试用例可在此基础上修改。

切记，遵守CSS hack的三条原则。CSS hack是没有办法的时候才使用的解决兼容性问题的招术，是用兼容性问题去解决兼容性问题，无异于饮鸩止渴。切莫一有兼容性问题就使用。
另外，时刻记得改掉用CSS hack修补的问题。

补充一点儿好玩儿的东西，Yahoo也有一种实现hack的方式，比较特殊。Yahoo会利用服务器去判断打开其页面的浏览器的类别，然后，把信息加到HTML标签上，比如我使用Firefox打开Yahoo的首页，查看它的HTML标签，发现：

HTML code

< html lang ="en-US" class ="y-fp-bg y-fp-pg-grad ua-ff ua-win ua-ff3_6 bkt701" > …… </ html >

注意其中的ua-ff ua-win ua-ff3_6，含有浏览器类别和版本的信息。
然后，在设置特定浏览器的样式时，比如，我希望在Firefox里让所有的div中的文字都是红色，可以这样设置：

CSS code

.ua-ff div { color : red ; }

跨浏览器的网页设计一直是让人很头疼的问题，这不只是因为浏览器的版本众多，还有一个重要的原因是相同浏览器的不同时期的版本也会有差异，甚至是在不同操作同台上还会有不同。因此使CSS hack技术进行浏览器区分是实现跨浏览器访问一个好方法。CSS Hack技术有很多，具体可以查看：

   本文据说的主要是通过“.”，“>”，“*”，“_”来区分。以下是本人对这四种符号的测试结果：
———————IE6——     IE7——IE8——FF2——FF3—     Opera9.5
>property——     Y——     Y——     Y——     N——     N——     N
.property——     Y——     Y——     Y——     N——     N——     N
*property——     Y——     Y——     Y——     N——     N——     N
_property——     Y——     N——     N——     N——     N——     N

我们可以看到>property、.property、*property在各浏览器中的表现是一致的，只有_property在IE6和IE7、IE8中有所区别。另外还要注意的，IE6是不支持!important的，而其他几款浏览器都识别。

举例：
要对想同的文字在不同浏览器中显示不同的颜色可以使用： color:brown !important;  /*用于Opera、Firefox2、Firefox3等现代浏览器*/  
>color:green !important;    /*IE7、IE8可以识别该规则，因此它覆盖掉了上一条规则*/   
color:red;  /*所有浏览器都可以识别，但是以上两条规则有!important，所以这条规则被忽视；只有IE6认识并覆盖掉上两条规则*/   


color:brown !important;    /*用于Opera、Firefox2、Firefox3等现代浏览器*/
>color:green !important;      /*IE7、IE8可以识别该规则，因此它覆盖掉了上一条规则*/
color:red;    /*所有浏览器都可以识别，但是以上两条规则有!important，所以这条规则被忽视；只有IE6认识并覆盖掉上两条规则*/
因此这就实现了跨浏览器的表现问题。_property和*property也是一样的。对于_property来说，只有IE6才能识别，因此可以用于单独对IE6的设置中。

不过这里要注意书写的顺序：现在浏览器的写法要写在最前面，IE6的写法要写在最后面用于覆盖，其他浏览器写在中间。方法二：其实主要是浏览器：IE6/IE7/firefox下，各个对CSS代码的解释有区别，下边转载一篇HACK的文章，相当实用。

区别IE6与FF：           background:orange;*background:blue;

区别IE6与IE7：          background:green !important;background:blue;

区别IE7与FF：           background:orange; *background:green;

区别FF/IE7/IE6：       background:orange;*background:green !important;*background:blue;

注：IE都能识别*标准浏览器(如FF)不能识别*
IE6能识别*，但不能识别 !important
IE7能识别*，也能识别!important
FF不能识别*，但能识别!important

另外再补充一个，下划线"_",
IE6支持下划线，IE7和firefox均不支持下划线。(推荐.我这只有这个有效！)

于是大家还可以这样来区分IE6、IE7、firefox
: background:orange;*background:green;_background:blue; 


 

* html p {color:#f00;} 支持 IE6 不支持FF IE7 IE8b

*+html p {color:#f00;} 支持 IE7 IE8b 不支持FF IE6

p {*color:#f00;} 支持 IE7 IE6 不支持FF IE8

注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在后面。

转载于:https://www.cnblogs.com/baogg/articles/1923064.html