浏览器的阵型： 此文档将浏览器分为IE阵型和Webkit阵型。IE阵型包括：微软的IE6、IE7、IE8、IE9，国内在此内核扩展的360、搜狗、遨游、世界之窗、腾讯TT浏览器、瑞影、百度浏览器、瑞星浏览器、糖果、GreenBrowser、飞腾、闪游、中易等。Webkit 阵型包括：Mozilla Friefox（Mozilla开源组织）、Chrome（google公司）、Safari（苹果公司）、Oprea（挪威开发商、中文翻译为‘欧朋’）等等。

!国内外用户使用习惯： 由于微软windows操作系统（系统默认附带IE浏览器）在中国大陆的历史原因，目前国人使用的浏览器大部分都是IE内核的浏览器，包括：IE6、 IE7、IE8、IE9、360、搜狗、遨游、腾讯TT、世界之窗等。其中360和搜狗的市场份额最大。可以这样看，旧版本的国产浏览器是站在IE阵型的 （类似于java和.net阵型），但是现在的新版本的国产浏览器，比如360和遨游，它既有IE内核的特性，又兼顾了Webkit 特性的双重体验。举一个例子，新版遨游浏览器同样支持CSS3的圆角和投影显示。在国外，由于版权意识等原因，老外使用Webkit内核浏览器居多。最新数据显示，chrome 超越了 ie 的市场份额。

什么是CSS Hack？由于不同的浏览器，比如IE 6，IE 7，Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，不同内核的浏览器之间页面效果存在差异。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中实现页面效果的一致性。针对不同的浏览器写不同的CSS Code的过程，就叫CSS hack。 我们写 ie 和 firefox 的css hack，可以认为，兼容火狐浏览器，一般情况下都会兼容chorme、oprea、safari浏览器。firefox和它们还是有细微的区别，如果 html和css结构规范，一般情况下还是可以认为：兼容firefox，即兼容了chrome、oprea、safari，因为它们是同一个阵型的。另 外，firefox3.5以上的版本，和ie8兼容性接近。

CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack，主要针对IE内核和非ie内核的浏览器。

类内部Hack：比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。
选择器Hack：比如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。
HTML头部引用Hack：针对所有IE：，针对IE6及以下版本：，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

以下注释约定FF为 firefox，CH为：chorme，OP为：oprea，SF为：safari。

常见的CSS hack写法大全：
.newsList{
　　padding:10px; /* FF CH OP 都能识别 */
　 [padding:10px; padding:12px;]; /* SF, CH (值取后者：padding：8px) */　
　　padding:9px\9; /* 所有 ie 内核浏览器都执行*/
　　padding:8px\0; /* ie8-9 都能识别，一般用于识别ie8 */
　　*padding:5px; /* ie6-7 都能识别 */
　　+padding:7px; /* 只有ie7能识别 */
　　_padding:6px; /* 只有ie6能识别 */　
}

上述模块说明：

1）此处用padding作为举例，其他css属性如color、font、margin等同样适用。
2）只有ie6执行，在属性名称声明的时候加下划线“_”；
3）只有ie7执行，属性名前加“+”号；
4）只有ie6和ie7同时执行，属性名声明时，前面加星“*”号；
5）只有ie8、ie9同时执行，在属性值后面加“\0”；
6）所有ie都执行，在属性值后面加“\9”；
如果chrome、safari元素显示存在差异，可以在中括号（如上面的模块）里面覆盖最外层的定义。
单纯写padding:10px; 所有浏览器都会执行。
7）上面模块的css书写顺序主要是为了方便阅读，即写CSS Hack的时候，先写火狐阵型浏览器的hack，然后再写ie家族的hack。
8）注意：以 上模块，中括号声明之前的内容明确分顺序的，如果将中括号的内容声明在padding:10px;之前，那么padding:12px 的定义，对于chrome/safari是不生效的；而中括号之后的css定义是不分顺序的。以上模块是详细的定义，在实际项目中，可以根据具体需要进行 部分声明。

其他常见的CSS hack如下：

1） 对于div容器直接的左右浮动，使用了边距定义，ie6下会计算双倍的边距，比如padding- left:5px，ie6下会计算为padding-left:10px; 此种情况，可以将定了边距浮动的div容器，设置 display:inline; 或者 设置一个只有ie6下执行的更小的边距值。

2）a容器左浮动，b容器右浮动，如果要c容器脱离a、b容器，需要定义c容器为：clear:both;，让c容器清除继承浮动，另起一行。

3）声明了高度为35px的导航，行高为line-height:35px; 还定义了背景图片。在ie6下会有高度溢出的情况，加：overflow:hidden; 隐藏之。

特别兼容写法（作为阅读即可）：

/* webkit and opera */
@media all and (min-width: 0px){ .sofish{padding:11px;} }

/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0){ .sofish{padding:11px;} }

/* opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} }

/* all firefox * /
@-moz-document url-prefix(){ .sofish{padding:11px;}}

/* newest firefox */
html>/**/body .sofish, x:-moz-any-link, x:default { padding:11px; }

Jquery判断浏览器版本

// 以jQuery为例，检测是否是IE6，是则加上class="ie6"
if ($.browser.msie && $.browser.version = 6 ){
    $('div').addClass('ie6');
}

!important; 请勿随便使用这个标签, 因为不同的写法和环境, 现代非ie6的浏览器也是支持这个写法的, 不要轻信网上的说法。 这个标签在碰到ie6特有的某些环境下使用才比较划算. 它的其中一个比较常用的应用是，某些情况下，css中font的定义，ie6的字体大小偏大或者不起作用，可以这样写：font-size:12px !improtant;，在字体大小的定义之后加一个important。这是最小作用域的应用。如果在大的div作用域里面使用!important ，会出现一些莫名其妙的问题。在前端开发中，我们始终记住一点，那就不要单独为了表现而去写css及设计，而是要为数据和内容去css和design！

1、 尽量使用单独Hack：这样维护起来成本比较低，改动不会影响其他的浏览器，而一旦有浏览器淘汰，只要搜索关键字，就可以批量 去掉这些代码。比如，ie6的单独hack：_padding:6px;；2、向后兼容的目标：1年 你想现在的网站兼容IE10么，谁不想，但这可预见性太低了，也可以说，成本太高了。暂时没必要。不过，IE9发布了，所以，选择像 padding:8px\0;这 样的IE8+的hack，在删掉其他代码不影响向后兼容上，会更好；并且，如果IE10出来，一旦支持这个hack，而又没有这个bug，可能删掉只影响 2个浏览器，也会更方便；3、尽可能省资源：你要是不考虑页面加载速度，不考虑服务器承受能力的话，那在向后兼容和淘汰的处理上可以做得很完美。

hack区分不同浏览器下字体的颜色

宝来网按照从业经验，整理的web前端规范文档，转载注明：宝来网

第二篇：WEB_CSS Hack

1.?? IE ?? IE ??? ??

#tip { background:blue; /*? IE ????*/ background:red \9; /*IE6,IE7,IE8 ????*/ }

2.?? IE6,IE7,IE8,FF ?? ??????:?\9?,?*?,?_? ????:

#tip { background:blue; /*Firefox ?????*/ background:red \9; /*IE8 ?????*/ *background:black; /*IE7 ?????*/ _background:orange; /*IE6 ?????*/ }

????:?? IE ????????\9?,? IE6 ? IE7 ???*?(???), ?? IE6 ????_?(??),???????????,????????? ????????? CSS ??,????????? IE ????? IE ??? (??

Firefox,Opera,Google Chrome,Safari ?). 3.?? IE6,IE7,Firefox (?? 1) ?? , , ?? ??????:?*?,?_? ????:

#tip { background:blue; /*Firefox ?????*/ *background:black; /*IE7 ?????*/ _background:orange; /*IE6 ?????*/ }

????:IE7 ? IE6 ???*?(???),IE6 ?????_?(??),?? IE7 ????? ?_? ?? Firefox(? IE ???)??????? , ?*? ?_? ? , ????????????????

IE6,IE7,Firefox 4.?? IE6,IE7,Firefox (??

2) ?? , , ?? ??????:?*?,?!

important? ????:

#tip { background:blue; /*Firefox ?????*/ *background:green !important; /*IE7 ?????*/ *background:orange; /*IE6 ?????*/ }

????:IE7 ?????*???!important?,

?? IE6 ??????*?, ??????!

important?,?? Firefox ?????!

important????? ??*????????????????? IE6,IE7,Firefox.

5.?? IE7,Firefox ?? , ??????:?*?,?!important? ????:

#tip { background:blue; /*Firefox ?????*/ *background:green !important; /*IE7 ?????*/ }

????:?? Firefox ?????!

important????????*?,? IE7 ????????*?,?!important?,????????????? IE7 ? Firefox. 6.?? IE6,IE7 (?? 1) ?? , ?? ??????:?*?,?_? ????:

#tip { *background:black; /*IE7 ?????*/ _background:orange; /*IE6 ?????*/ } ????:IE7 ? IE6 ??????*?(???),? IE6 ?????_?(??), IE7 ?????,?? IE7 ?????_?????????? IE6 ? IE7 ? ????. 7.?? IE6,IE7 (?? 2) ?? , ?? ??????:?!important? ????:

#tip { background:black !important; /*IE7 ?????*/ background:orange; /*IE6 ?????*/ }

????:?? IE7 ????!important;?? IE6 ???,? CSS ???? ??????,?? IE6 ?????????!important????????? ?? CSS,??????????. 8.?? IE6,Firefox ?? , ??????:?_? ????:

#tip { background:black; /*Firefox ?????*/ _background:orange; /*IE6 ?????*/ }

????:?? IE6 ?????_?(??),?? Firefox ???,????? ?????????

Firefox ? IE6,???? CSS hack.

CSS Hack ???? CSS ???????????????????????,?????? ??? CSS ???????,??????????????????. ??????????,??????????:

IE7, IE6, Opera9(???????? 9.25 8825), Safari3(???????? 3.0.4 523.15),

Firefox2(???????? 2.0.0.11). ???? selector { property:value; } ??????????????????? Hack ?????????. IE ??: selector { +property:value; } ?????????"+",?? Hack ?? IE ??????. selector { *property:value; } ?????????"*",?? Hack ?? IE ??????. selector { _property:value; } ??????????"_",?? Hack ?? IE ?? (? IE7 ?) ??. * html selector{ property:value; } ?????????? * html selector, ?? Hack ?? IE ?? (? IE7 ?) ????. html/**/ >body selector { property:value; } ?????????? html/**/ >body selector ,?? Hack ?? IE ?? (? IE7 ?) ????. selector { property/**/:value; } ???????":"??????,?? IE6 ?. selector/**/ { property/**/:value; } ????????"{"??????????? ":"??????,?? IE5 ? IE6 ? (??? IE5.5) . select/**/ { property:value; } ????????"{"??????,?? IE5 ?. *+html selector { property:value !

important; } ?????????? *+html selector ??? !important, ?? Hack ?? IE7 ????. Firefox: *:lang(lang) selector { property:value !important; } ??? lang

(??)?? ?!important ??????,???? Firefox ????. Safari: selector:empty { property:value !important; } ??? empty ???!important ?? ????,???? Safari ????. Opera: @media all and (min-width: 0px){ selector { property:value; } } ???????? ?????,???? Opera ????. ??? Hack ????,??????.

? Hack ???,????? CSS ??? Hack,???? Hack. CSS ???? IE5.X ??????????.?? Hack ?? IE5.X: selctor {

width:IE5.X ??; voice-family :"\"}\""; voice-family:inherit; width: ????; } ???? Hack,???????????:

selector:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } ???????? CSS Hack ???,???????????????????????. ?????????

?:http://centricle.com/ref/css/filters/