【珍藏版】IE6,IE7,IE8,Firefox等浏览器兼容的css hack
IE6，IE7，IE8，Firefox等浏览器兼容的css hack一、开发平台的选择我很幸运, 我接触网页前台的时候Firefox2 已经十分红火, 我的所有工作都是在Firefox 上展开, 同时兼容其他浏览器的. 这样做肯定会比在IE 做好再到别的浏览器兼容来得容易, 因为IE 对老标准支持还是很不错的, 而IE 的一些特有功能人家却不支持. 所以我推荐以Firefox 结合Firebug 扩展作为平台.在解决兼容方法上，想定出一个统一的规范，个人认为应该以下面3点为基本原则：权衡成本：在浏览器被淘汰后，如何快速清理掉无用代码可维护：在资源成本和完美间平衡的向后兼容可读：省力、易记二、Hack 的顺序使用Firefox 作为平台, 只要代码写得够标准, 其实要Hack 的地方不会很多的, IE 以外的浏览器几乎都不会有问题, 所以可以暂时忽略,顺序如下:Firefox -> IE8 -> IE7 -> IE6 -> 其他三、CSS 选择器Hack/* Opera */@media all and (-webkit-min-device-pixel-ratio:10000), not all and(-webkit-min-device-pixel-ratio:0){head~body .sofish{display:block;}}这种写法的优缺点是：优点：全面，各种HACK都有；清理无用代码里易认缺点：选择器名称不易记；代码量多（要重复写选择器）四、CSS 属性Hack.sofish{padding:10px;padding:9px\9; /* all ie */padding:8px\0; /* ie8-9 */*padding:5px; /* ie6-7 */+padding:7px; /* ie7 */_padding:6px; /* ie6 */}这种写法的优缺点是：优点：易记；代码少缺点：不全面五、IE 注释<!--[if IE]>IE only<![endif]--><!--[if !IE]>NOT IE<![endif]-->这种写法的优缺点是：优点：安全；向后兼容好；易维护缺点：用不好会增加HTTP请求；用得好代码又多六、浏览器探测：JS/后端程序判断// 以jQuery为例，检测是否是IE6，是则加上class="ie6" if ($.browser.msie && $.browser.version = 6 ){ $('div').addClass('ie6');}这种写法的优缺点是：优点：全面；易维护；可读性高缺点：占资源；代码量大（要重写选择器）总结：-----------------1、尽量使用单独HACK这样维护起来成本比较低，改动不会影响其他的浏览器，而一旦有浏览器淘汰，只要搜索关键字，就可以批量去掉这些代码。
比如，ie6的单独hack：_padding:6px;；2、向后兼容的目标：1年你想现在的网站兼容IE10么，谁不想，但这可预见性太低了，也可以说，成本太高了。
暂时没必要。
不过，IE9可能要发布了，所以，选择像padding:8px\0;这样的IE8+的hack，在删掉其他代码不影响向后兼容上，会更好；并且，如果IE10出来，一旦支持这个hack，而又没有这个bug，可能删掉只影响2个浏览器，也会更方便；3、尽可能省资源你要是不考虑页面加载速度，不考虑服务器承受能力的话，那在向后兼容和淘汰的处理上可以做得很完美（从代码上），但这从某种程度上，不如不做。
-----------------七、Hack 的方法说到方法有两种, 一种是在不同文件中处理, 另一种则是在同一个文件中处理. 其实作用是相同的, 只是出发点不一样而已.1. 同一文件中处理.如: id="bgcolor" 的控件要在IE6 中显示蓝色, IE7 中显示绿色, Firefox 等其他浏览器中显示红色.#bgcolor {background:red !important; /* Firefox 等其他浏览器*/background:blue; /* IE6 */}*+html #bgcolor {background:green !important; /* IE7 */}IE6 不认!important, 也不认*+html. 所以IE6 只能是blue.IE7 认!important, 也认*+html, 优先度: (*+html + !important) > !important > +html. IE7 可以是red, blue 和green, 但green 的优先度最高.Firefox 和其他浏览器都认!important. !important 优先, Firefox 可以是red 和blue, 但red 优先度高.上述的优先符号均是CSS3 标准允许的, 其他浏览器也还有其他的Hack 方法, 但我迄今还没遇到过Firefox 正常, IE 以外的其他浏览器不正常的情况, 所以无可分享. 只要代码规范, 相信这种情况的发生应该是很罕见(JavaScript 除外).2. 不同文件中处理.为什么同一文件中可以处理还要写在多个文件里面针对不同的浏览器? 这是为了欺骗W3C的验证工具, 其实只需要两个文件, 一个是针对所有浏览器的, 一个只为IE 服务. 将所有符合W3C 的代码写到一个里面去, 而一些IE 中必须的, 又不能通过W3C 验证的代码(如: cursor:hand;) 放到另一个文件中, 再用下面的方法导入.<!-- 放置所有浏览器的样式--><link rel="stylesheet" href="style.css" type="text/css" /><!-- 只放置IE 必须的, 而不能通过W3C 的代码--><!--[if IE]><link rel="stylesheet" href="style_ie.css" type="text/css" /><![endif]-->浏览器的CSS Hack 方法有很多, 比如@import 引入, > 过滤等等方法, 但以上就是我用过的全部.网页前台的兼容不应该仅限于对过去的浏览器支持(向前兼容), 更应该对未来的浏览器服务(向后兼容). 因为浏览器的发展很快, 而经常上网的人更新软件的频率是非常高的, 所以向后兼容的意义甚至比先前兼容还来得重要. 如何向后兼容呢? 只要符合标准你的网站就永远不会过时(IE 系列除外). 所以我的宗旨是尽量做到标准, 不得已才Hack, 并尽量使用比较简单的方法去解决.八、个人推荐写法其实可以纠结的还真多，这里结合A-Grade浏览器的种类和HACK的种类，写两种个人认为比较合理的HACK和向后兼容相兼顾的写法，仅供大家参考的。
（一）、经济实惠型写法：注重单独的HACK。
IE的HACK比较多，选择省力易记的属性HACK；其他浏览器HACK少，选择块状的选择器HACK(推荐).sofish{padding:10px;padding:9px\9; /* all ie */padding:8px\0; /* ie8-9 目前应用于IE8的单独hack，情况比较少*/*padding:5px; /* ie6-7 */+padding:7px; /* ie7 */_padding:6px; /* ie6 */}/* 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;} }/* firefox * /@-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */html>/**/body .sofish, x:-moz-any-link, x:default { padding:11px; } /* newest firefox */（二）、准完美主义写法：配合IE注释，一律采用选择器HACK（选择性推荐）HTML: 添加body class<!--[if IE6]--><body class="ie6"><![endif]--><!--[if IE7]--><body class="ie7"><![endif]--><!--[if IE8]--><body class="ie8"><![endif]--><!--[if IE9]--><body class="ie9"><![endif]--><!--[if !IE]--><body class="non-ie"><![endif]-->.sofish{padding:10px;}.non-ie .sofish{padding:12px;}.ie9 .sofish{padding:9px;}.ie8 .sofish{padding:8px;}.ie7 .sofish{padding:7px;}.ie6 .sofish{padding:6px;}/* 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;} }/* firefox * /@-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */html>/**/body .sofish, x:-moz-any-link, x:default { padding:11px; } /* newest firefox */然后，从第二种方式我们也可以发现。
浏览器兼容css-Hack写法汇总
虽然和大家在学习各浏览器的Hack的写法，但我还是要说“Hack对于一位专业的前端攻程师来说并不是一样很好的东西，我力求处理浏览器兼容，尽量不使用Hack写法来处理，除非实在没有办法的情况下，再加以使用。
”下面我们先来简单的了解一下什么是CSS Hack。
Hack是针对不同的浏览器去写不同的CSS样式，从而让各浏览器能达到一致的渲染效果，那么针对不同的浏览器写不同的CSS CODE的过程，就叫CSS HACK，同时也叫写CSS Hack。
然后将Hack放在浏览器特定的CSS文件中，让其符合条件的浏览器解析这些代码，就如前面所说的条件样式，我们将CSS Hack代码放入条件样式文件中，符合条件的浏览器就解析，不符合的将不解析，从面达到您所需要的页面渲染效果。
总的一句话来说使用CSS Hack将会使用你的CSS代码部分失去作用，然后借助条件样式，使用其原CSS代码在一些浏览器解析，而CSS Hack代码在符合条件要求的浏览器中替代原CSS那部分代码。
常见的就是在IE6下使用，不具体说，我想大家都有碰到过了。
下面我们就一起来看看所有浏览器都具有什么Hack，换句话说，各种浏览器都能识别哪些CSS的写法。
下面是我收集有关于各浏览器下Hack的写法1、Firefox@-moz-document url-prefix() {.selector {property: value;}}上面是仅仅被Firefox浏览器识别的写法，具体如：@-moz-document url-prefix() {.demo {color:lime;}}支持Firefox的还有几种写法：/* 支持所有firefox版本*/#selector[id=selector] { property: value; }或者：@-moz-document url-prefix() { .selector { property: value; } }/* 支持所有Gecko内核的浏览器(包括Firefox) */*>.selector { property: value; }2、Webkit枘核浏览器(chrome and safari)@media screen and (-webkit-min-device-pixel-ratio:0) {Selector { property: value; }}上面写法主要是针对Webkit内核的浏览器，如Google Chrome 和Safari浏览器：@media screen and (-webkit-min-device-pixel-ratio:0) {.demo { color: #f36; }}3、Opera浏览器html:first-child>body Selector {property:value;}或者：@media all and (min-width:0) {Selector {property: value;}}或者：@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {head~body Selector { property: value; }}上面则是Opera浏览器的Hack写法：@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {head~body .demo { background: green; }}4、IE9浏览器:root Selector {property: value9;}上面是IE9的写法，具体应用如下：:root .demo {color: #ff09;}5、IE9以及IE9以下版本Selector {property:value9;}这种写法只有IE9以及IE9以下版本能识别，这里需要注意此处“9”只能是“9”不能是别的，比如说“8”，不然会失去效果的，如：.demo {background: lime9;}6、IE8浏览器Selector {property: value/;}或者：广州活动策划公司@media �screen{Selector {property: value;}}上面写法只有IE能识别，如：.color {color: #fff/;}或者：@media �screen{.color {color: #fff;}}7、IE8以及IE8以上的版本Selector {property: value�;}这种写法只有IE8以及IE8以上版本支持，如.demo {color: #ff0�;}8、IE7浏览器*+html Selector{property:value;}或*:first-child+html Selector {property:value;}上面两种是IE7浏览器下才能识别，如：*+html .demo {background: green;}或者：*:first-child+html .demo {background: green;}9、IE7及IE7以下版本浏览器Selector {*property: value;}上面的写法在IE7以及其以下版本都可以识别，如：.demo {*background: red;}10、IE6浏览器Selector {_property/**/:/**/value;}或者：Selector {_property: value;}或者：*html Selector {property: value;}具体应用如下：.demo {_width/**/:/**/100px;}或者：.demo {_width: 100px;}或者：*html .demo {width: 100px;}上面具体介绍了各种版本浏览器下如何识别各种的Hack写法，包括了IE6-9以及现代版本的浏览器写法。
IE6,IE7,IE8,Firefox,Chrome,Safari的CSS hack兼容表
小知识：什么是CSS hack？由于不同的浏览器，比如IE6、IE7、IE8、Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。
这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack，也叫写CSS hack。
各浏览器CSS hack兼容表：代码示例：#test{color:red; /* 所有浏览器都支持*/color:red !important;/* Firefox、IE7支持*/_color:red; /* IE6支持*/*color:red; /* IE6、IE7支持*/*+color:red; /* IE7支持*/color:red\9; /* IE6、IE7、IE8支持*/color:red\0; /* IE8支持*/}body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持*/整体测试代码示例：.test{color:#000000;color:#0000FF\0;[color:#00FF00;*color:#FFFF00;_color:#FF0000;}其他说明：1、如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，此代码如下：<meta http-equiv=”x-ua-compatible” content=”ie=7″ />2、body:nth-of-type(1) 如果这样写，表示全局查找body，将会对应第一个<body>。
3、还有其他写法，比如：*html #test{}或者*+html #test{}4、*+html 对IE7的hack 必须保证HTML顶部有如下声明：/TR/html4/loose.dtd5、顺序：Firefox、IE8、IE7、IE6依次排列。
史上最全IE6.IE7.IE9.IE10.谷哥.火狐各浏览器网页兼容性介绍总结
兼，是什么！你会想到是什么，作为一个跟HMTL+CSS打交道的人来说，我只能说，我想到的只有兼容性了，兼容性自始至终困惑着许多人，例如坑爹的IE，是纵多主流浏览器中比较戳的那一个，因BUG手下纵多而闻名，家族几代问题层出不穷。
最坑爹的那个就是IE6，被纵多开发人员包括前端人员所憎恶。
却受许多企业的爱戴。
顺便说一下为什么IE6还在中国活得好好的，IE6是Windows XP中自带的一种浏览器，而Windows XP目前来说是微软开发得比较好也是比较成功的系统，使用人数多。
IE6的稳定性也比较好，目前，大多数企业特别是银行和政府的系统还是使用IE6而不愿升级也是有这方面的原因，IE6之所以盛行当然不只这一些原因，至少IE6什么时候会死那只是时间的问题罢了，在没死之前，我们得保证我们能活着。
好了，接下来来看一下一些兼容性的问题吧，这里只列出数项，日后继续完善。
1.注释引起的血案（1）在注释的时候，如果注释不当，部分浏览器会将会解析错误。
（demo1）如：<!-- 这里是注释内容-->正常显示；<!-- 这里是注释内容- ->时则在IE浏览器下正常显示，在Chrome、Firefox、Safari下不可显示。
或者->也是如此。
解决方法：在进行注释时切记不要着急，看好是否注释有问题，最好能够用VS中自带的注释，以保万无一失。
详见demo1。
（2）注释引发的血案（demo11）文字溢出：问题见demo11,test1：去掉<div style=”float:left;”></div> 中的“float:left”，就会发现多出来的字不见了，页面正常显示；同样去除<div style=”width:350px;float:right;”>中的“float:right”，多余的字也同样消失，页面正常显示。
分析：文字溢出与区块的浮动有关。
test2：把注释放到<div style=”float:left”></div>前面，多余的字消失，页面正常显示把注释放到<div style=”width:350px;float:right;”>我就只有一行字</div>后面，多余的字也同样消失，页面正常显示。
CSSHack的一些写法
CSSHack的⼀些写法参与测试的浏览器：IE6，IE7，IE8，IE9 Preview，Firefox 3.67，Safari 5.0和Opera 10.0以下是IE系列的Hack写法（注意顺序）：.color {color:#000;/* 所有浏览器⽀持 */color:grey !important;/* 除IE6外，所有浏览器都⽀持 */color:red\9;/* IE系列浏览器(ie6+)⽀持，但是IE8不能识别“*”和“_”的css hack；所以我们可以这样写hack */color:orange\0;/* IE8⽀持 */*color:yellow;/* IE6,IE7⽀持 */+color:#C0C;/* IE6,IE7⽀持 */_color:blue;/* IE6⽀持 */}运⾏结果为：IE6⽂字颜⾊blue，IE7为#C0C，IE8为orange，其他浏览器（包括IE9 Preview）均为grey此外，IE7⽀持如下写法：*+html .bgcolor {background-color:#FF99CC;/* 仅IE7⽀持“*+html” */}下⾯是IE6、IE5的⼀些写法（注意注释的摆放位置）：html/* 注释 */>body .ie6 {border:1px dashed #CCC;/* IE6，IE5⽀持 */}.nie6 {display:/* 注释 */none;/* IE6不⽀持 */}.nie56/* 注释 */ {display:/* 注释 */none;/* IE6，IE5不⽀持 */}除此之外，我们在使⽤浮动布局的时候，⼀个div块包含两个浮动的div块，往给这个⽗div块添加如下代码以清除浮动：#box:after {/* 清除浮动,但IE6和IE7不⽀持 */content:".";display:block;height:0;clear:both;visibility:hidden;}但遗憾的是，这种⽅法IE6、IE7不识别，往往我们使⽤在两个⼦div后添加空的div以清除浮动。
CSS各浏览器兼容问题整理
目录目录 (1)一、IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表 (3)1) 区别IE和非IE浏览器 (3)2) 区别IE6,IE7,IE8,FF (3)3) 区别IE6、IE7、Firefox (方法1) (4)4) 区别IE6、IE7、Firefox (方法2) (4)5) 区别IE7、Firefox (4)6) 区别IE6、IE7 (方法1) (4)7) 区别IE6、IE7 (方法2) (5)8) 区别IE6、Firefox (5)二、IE 的if条件Hack (5)三、对齐产生的问题 (6)1) div的居中对齐问题 (6)2) div中文字垂直居中对齐的问题 (7)3) 怎样使一个层垂直居中于浏览器中 (7)4) 如何对齐文本与文本输入框 (7)四、宽高问题 (7)1) IE6下容器的宽度和FF解释不同 (7)2) 页面的最小宽度 (8)3) 为什么无法定义1px左右高度的容器 (8)4) Firefox 关于DIV高度无法自适应 (8)5) div重叠的现象 (9)6) IE与宽度和高度的问题 (9)7) div嵌套时，外层div高度不能自适应 (10)8) div嵌套时y 轴上外层div 到内层div 的距离的问题 (10)9) padding，marign，height，width 的傻瓜式解决技巧 (10)10) FORM标签 (10)五、浮动 (11)1) margin加倍的问题 (11)2) DIV浮动IE文本产生3象素的bug (11)3) 怎么样才能让层显示在FLASH之上呢 (11)4) float的div闭合;清除浮动 (12)5) 自适应高度 (13)六、列表类 (13)1) UL的padding与margin (13)2) ul和ol列表缩进问题 (14)3) list-style-image无法准确定位 (14)4) LI中内容超过长度后以省略号显示的方法 (14)七、链接 (14)1) 游标手指cursor (14)2) ,给a标签内内容加上样式, (15)3) 链接(a标签)的边框与背景 (15)4) ff不支持expression 例如去掉链接的边框要分别写不同的css (15)5) 超链接访问过后hover样式就不出现的问题 (15)八、背景、图片类 (15)1) IE6下为什么图片下有空隙产生 (15)2) 图片垂直于容器内 (15)3) background 显示问题 (16)4) 背景颜色无法显示 (16)5) 背景透明问题 (17)九、其他问题 (17)1) 如何使连续长字段自动换行 (17)2) 为什么web标准中IE无法设置滚动条颜色了 (18)3) 属性选择器(这个不能算是兼容,是隐藏css的一个bug) (19)4) IE捉迷藏的问题 (19)5) BOX模型解释不一致问题 (19)6) IE6下绝对定位的容器内文本无法正常选择 (19)7) CSS双线凹凸边框 (19)8) IE选择符空格BUG (20)9) ff不支持<body scroll="no" > scroll属性 (21)10) ff不支持数据岛绑定 (21)11) ff不能用.click();方法打开链接 (21)12) 目前FF2.0为止都不支持IE的name锚点 (22)一、IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表不同的浏览器对CSS的解释都有一点出入，特别是padding, line-height这些要细微控制的地方，下面的hack基本可以解决这个问题：详细查看•在属性前加下划线(_)，那么此属性只会被IE6解释•在属性前加星号(*)，此属性只会被IE7解释•在属性值后面加"\9"，表示此属性只会被IE8解释各浏览器CSS hack兼容表：代码如下:#test{color:red; /* 所有浏览器都支持*/color:red !important; /* Firefox、IE7支持*/_color:red; /* IE6支持*/*color:red; /* IE6、IE7支持*/*+color:red; /* IE7支持*/color:red\9; /* IE6、IE7、IE8支持*/color:red\0; /* IE8支持*/}body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持*/1)区别IE和非IE浏览器【区别符号】：「*」、「\9」#tip{background:blue; /*非IE背景藍色*/background:red\9; /*IE6、IE7、IE8背景紅色*/}（详细查看）2)区别IE6,IE7,IE8,FF【区别符号】：「*」、「_」、「!important」#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等)。
最全的CSShack没有之一
最全的CSShack没有之⼀1、何为HACK？简单的说，HACK就是只有特定浏览器才能识别这段hack代码。
Hack也可以说是让前端最为头疼的问题，因为要写N多种兼容代码。
当然，IE是最让⼈蛋疼的。
⼀般来说，CSS HACK有3种表现形式：CSS属性前缀法：：⽐如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，IE6~IE10都认识"\9"，但firefox对前⾯三个都不能认识。
CSS选择器前缀法：⽐如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。
IE条件注释法：针对所有IE，<!--[if IE]>IE浏览器显⽰的内容 <![endif]-->。
⽐如：针对IE6及以下版本： <!--[if lt IE 6]>只在IE6-显⽰的内容 <![endif]-->。
这类Hack不仅对CSS⽣效，对写在判断语句⾥⾯的所有代码都会⽣效(注：IE10+已经不再⽀持条件注释)。
下⾯将对这三种形式⼀⼀分析！2、CSS 属性前缀法这⾥提供⼀个测试实例（所有下⾯的代码都可以在这个实例⾥找到）：（1）IE6（_）.test1 { _color: red; }（2）IE7及其以下版本（*）如下设置，IE7及其以下版本中都会⽣效：.test2 { *color: yellow; }如果是在选择器上设置，则只会在IE6中⽣效：*html .test { color: gold; }（3）IE6/IE7/IE8（\9）⽹上的资料说只有IE6/IE7/IE8中⽣效，可是经测试，在IE9/IE10中也同样⽣效（如果知道原因的，请告知）：.test3 { color: purple\9; }（4）IE8/IE9/IE10/IE11（\0）在IE8/IE9/IE10/IE11中⽣效：.test4 { color: green\0; }（5）IE6（-）在IE6中⽣效：.test5 { -color: pink; }（6）IE6/IE7（+）在IE6/IE7中⽣效：.test6 { +color: gold; }（7）IE6/IE7（*+）如果在类的属性上加，会在IE6/IE7都⽣效：.test7 { *+color: blue; }如果在选择器上加，只会在IE7⽣效：*+html .test { color: black; }（8）!important除了IE6，其他浏览器中都⽣效：.test8 { color: #fff !important; }（9）IE9/IE10（\9\0）.test9 { color: orange\9\0; }⼀般写HACK的顺序：从最新版本到低版本，⽐如：新版本、IE（10/9/8）、IE（7/6）color: black; /* 所有 */color: white !important; /* 除了IE6外 */color: orange\9\0; /* IE 9/10 */color: green\0; /* IE 8/9/10 */*color: yellow; /* IE6/7 */+color: gold; /* IE6/7 */*+color: blue; /* IE6/7 */_color: red; /* IE6 */3、CSS选择器前缀法（1）*只在IE6中⽣效：*html .test21 { color: gold; }（2）*+只在IE7中⽣效：*+html .test22 { color: blue; }（3）IE6/IE7在IE6/IE7中⽣效：@media screen\9 {.test23 { color: purple; }}（4）IE6/IE7/IE8在IE6/IE7/IE8中⽣效：@media \0screen\,screen\9 {.test24 { color: gold; }}（5）IE8在IE8中⽣效：@media \0screen {.test25 { color: orange; }}（6）IE8/IE9/IE10/IE11在IE8/IE9/IE10/IE11中⽣效：@media screen\0 {.test26 { color: green; }}（7）IE9/IE10/IE11在IE9/IE10/IE11中⽣效：@media screen and (min-width: 0\0) {.test27 { color: red; }}4、条件注释下⾯的N表⽰版本。
企业网站建设时在各浏览器里兼容问题汇总
企业网站建设时在各浏览器里兼容问题汇总我们在做企业网站建设的时候，往往会遇到一个问题，就是做出来的页面在IE8下不兼容，或者是在IE6下不兼容，而且现在的浏览器有很多种，要么这个行了，那个又不行，这样的问题相信很多人都有遇到过，那么如何来解决呢，下面就来看看天柱网络小编是如何来解决这个问题的。
1、ie8下兼容问题，这个最好处理，转化成ie7兼容就可以。
在头部加如下一段代码，然后只要在IE7下兼容了，IE8下面也就兼容了。
2、flaot浮动造成IE6下面双倍边距问题，这个最常见，也最好处理，!important 解决，比如margin-left:10px !important;/*IE7,IE8,FF下是10PX*/;margin-left:5px;/*IE6下属性写的是5PX，但在显示出来的是10px*/3、清除块display，这个可以解决浮动造成的块，造成块后，当DIV背景填色或填图片的时候，会出现背景断开或差一小块。
解决方法是在出现兼容的DIV的CSS中写一个display:block，或其它属性，中文什么意思我不知道，我英语差，但能达到想要的效果。
4、很多朋友DIV+CSS的时候，会出现，在IE的几个浏览器下都好了，但是在FF出问题了，用!important又会把IE7做的不兼容，有没有什么方法只对FF下进行操做，我用过这个方法，就是在属性前面加符号如：*、&，￥，#，@，?，+，加过符号的属性只有IE的浏览器才识别，而FF不识别，方法如下(注意有符号的属性和没符号的属性的顺序)height:100px;/*FF下显示100的高*/height:120px;/*IE678下显示120高*/5、有时候，会在布局的时候，发现，有一个DIV浮动了，接下来的一个DIV本来是要在下面显示的，结果跑上面去了，这种情况一般在FF下面会出现，解决的办法就是清除一下浮动，在设置过浮动的那个DIV下面加一个DIV，CSS里面写个clear:both;如下6、再就是局中问题，主要原因是对盒子模型不够理解，没熟记盒子模型，如果发现你的页面没有局中，一般有这两个原因：（1）一个是没盒子，就是BODY后的一个大DIV把所有DIV装起来的那个，你没写。
网页排版中IE6,IE7,Firefox浏览器兼容性写法
网页排版中IE6，IE7，Firefox浏览器兼容性写法本文向大家简单介绍一下DIV+CSS网页排版中IE6，IE7，firefox火狐浏览器兼容性写法，希望本文介绍对你的学习有所帮助。
AD：你知道DIV+CSS网页排版中IE6，IE7，Firefox火狐浏览器兼容性写法吗，这里和大家分享一下，DIV+CSS浏览器兼容问题一直困绕着许多从事DIV＋CSS网页排版的美工人员，尤其是IE与火狐的兼容。
DIV+CSS网页排版中IE6，IE7，firefox火狐浏览器兼容性写法DIV+CSS浏览器兼容问题一直困绕着许多从事DIV＋CSS网页排版的美工人员，尤其是IE与火狐的兼容。
用DIV+CSS布局的网页在IE下显示一切正常，可是在火狐（FireFox）浏览器里打开，本来好好网页一下子就全乱了.让人怎么看?这一定会影响到你的网站的推广,seo优化,不利于搜所引擎的搜索.所以解决DIV+CSS浏览器兼容的问题是完全必须的.下面来看一下DIV+CSS浏览器兼容的实例，区分IE6，IE7，Firefox火狐浏览器CSS的写法：先来分开区分一下。
◆首先声明DIV+CSS浏览器兼容性IE6与IE7与火狐(firefox)的一些识别规则：1.IE都能识别*，标准浏览器(如Firefox)不能识别*；2.IE6能识别*，但不能识别!important,3.IE7能识别*，也能识别!important;4.firefox不能识别*，但能识别!important;◆请看下简单的DIV+CSS浏览器兼容实例:1．IE6和firefox的区别：background:orange;*background:blue;意思就是火狐浏览器的背景颜色是橙色,而IE浏览器的背景色是蓝色.2.IE6和IE7的区别：background:green!important;background:blue;意思指的是:IE7的背景颜色是绿色,IE6的背景颜色是蓝色3.区别IE7与Firefox：background:orange;*background:green;意思指的是:火狐浏览器的背景颜色是橙色,而IE7的背景颜色是绿色4.Firefox，IE7，IE6：background:orange;*background:green!important;*background:blue;意思是火狐浏览器的的背景橙色,IE7浏览器的背景颜色是绿色,而IE6浏览器的颜色是蓝色.为了更加清楚的来表达说明DIV+CSS浏览器兼容下面表格是更加清楚的能表达IE6,IE7,Firefox之间的识别标识区别:IE6 IE7 Firefox* √√×important ×√√。
兼容各种浏览器的的css编写方法
天也网络IE6，IE7，IE8，Firefox 兼容的问题有很多，天也网络在开发过程中不断总结。
最主要的IE下的BUG：断头台躲躲猫消失的 margin-bottom双空白边浮动相对容器中的绝对定位重复字符3像素文本偏移以上是主要的在IE下的BUG，具体问题要具体解决css (ie6,ie7,ie8,firefox)IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，IE8能识别" \9"，但不能识别下划线"_"，而firefox两个都不能认识,却可以识别…!important‟。
等等书写顺序，一般是将识别能力强的浏览器的CSS写在后面。
下面列举常用的CSS 方法1：!important!important作用是提高指定样式规则的应用优先权。
IE7以及所有标准浏览器能识别!important区别IE6与IE7与其他浏览器.browserTest{border:20px solid #60A179 !important;border:20px solid #00F;}在Mozilla中或者IE7浏览时候，能够理解!important的优先级，因此显示#60A179的颜色：在IE6中浏览时候，不能够理解!important的优先级，因此显示#00F的颜色：2：*IE都能识别*；标准浏览器(如火狐)不能识别*区别IE6与火狐.browserTest{border:20px solid #60A179;*border:20px solid #00F;}区别IE7与火狐.browserTest{border:20px solid #60A179;*border:20px solid #00F;}区别IE7，IE6与火狐.browserTest{border:20px solid #60A179;*border:20px solid #00F !important;*border:20px solid ###;}3：_IE6支持下划线，IE7和firefox均不支持下划线区别IE7，IE6与火狐.browserTest{border:20px solid #60A179;*border:20px solid #00F;_border:20px solid ###;}/*不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面*/4：*+html 与 *html*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.browserTest { width: 120px; } /* FireFox fixed */*html .browserTest { width: 80px;} /* ie6 fixed */*+html .browserTest { width: 60px;} /* ie7 fixed */3：\9 专属IE8的Hack.browserTest { width: 120px\9; } /* IE8 fixed */注意:*+html 对IE7的HACK 必须保证HTML顶部有如下声明：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose. dtd">以下是一些常用的CSS兼容技巧1)火狐下给div设置padding后会导致 width和height 增加, 但IE不会.(可用!important解决)2)垂直居中，将 line-height设置为当前div相同的高度, 再通过vertical-align: middle；( 注意内容不要换行)3)水平居中，margin:0 auto;(当然不是万能)4)若需给a标签内内容加上样式, 需要设置 display: block;(常见于导航标签)5)浮动IE产生的双倍距离在IE下，当一个div设置了float后，然后给他设置margin，就会出现加倍的margin，解决的办法是给div 设置 display:inline。
CSS过滤器兼容ie，火狐和谷歌
CSS过滤器兼容ie，⽕狐和⾕歌这篇汇总主要是提供⼀些CSS不透明的详细介绍，代码⽰例和解释，以实现这项有⽤的CSS技术在您的项⽬中兼容所有浏览器。
关于CSS 透明度，有⼀点需要注意的是，它虽然使⽤了很多年，但它⼀直以来都不是⼀个标准属性。
它是⼀种⾮标准技术，应该是CSS3规范的⼀部分。
1. 旧的Opacity设置 以下代码是Firefox和Safari旧版本所需的透明度设置:#myElement { -khtml-opacity: .5; -moz-opacity: 0.5; } -khtml-opacity设置是针对旧版本的Webkit渲染引擎，这种专⽤属性现在已经过时了，除⾮你还有需要兼容Safari 1.x.的⽤户。
第⼆⾏使⽤专⽤属性 -moz-opacity是为了兼容Mozilla渲染引擎的早期版本，以及追溯到Netscape Navigator。
Firefox 0.9以后就不要求使⽤-moz-opacity属性，Firefox 3.5（现在使⽤Gecko引擎）已经不在⽀持这个属性。
2. 在Firefox, Safari, Chrome和Opera下的CSS透明度 以下代码是除了IE外的所有当前浏览器的最简单，最最新的不透明度设置的CSS语法：#myElement { opacity: .7; } 上述语法将设置⼀个元素为70％不透明（或30%透明）。
设置opacity:1将使元素不透明，⽽设置opacity:0将使得元素完全不可见。
你只要记住“opacity”等同于“不透明”就很容易记住了，opacity值越⼩就越接近透明。
opacity属性可以精确地⼩数点后两位，所以值取“.01”和“.02”实际上是不同的，虽然可见度很难被发觉。
⼀般情况下，精确到⼀位就可以了，取值如“.3”或“.7”。
3. IE下的CSS透明度 IE下照旧有别于其他浏览器，并且⽬前也有三个不同版本的IE在⼴泛使⽤，透明度设置是不同的，有时需要额外的CSS来控制：#myElement { filter: alpha(opacity=40); } 上⾯的CSS使⽤专⽤的filter属性来设置IE6-8透明度。