IE6,IE7,IE8,Firefox,Chrome,Safari的CSS hack兼容表

合集下载

浏览器兼容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等浏览器兼容的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 注释这种写法的优缺点是：优点：安全；向后兼容好；易维护缺点：用不好会增加HTTP请求；用得好代码又多六、浏览器探测：JS/后端程序判断// 以jQuery为例，检测是否是IE6，是则加上class="ie6" if ($.browser.msie && $.browser.version = 6 ){ $('div').addClass('ie6');}这种写法的优缺点是：优点：全面；易维护；可读性高缺点：占资源；代码量大（要重写选择器）总结：-----------------1、尽量使用单独HACK这样维护起来成本比较低，改动不会影响其他的浏览器，而一旦有浏览器淘汰，只要搜索关键字，就可以批量去掉这些代码。

不同浏览器兼容报告

Shuo de——中国金融数据及工具首席服务商IE、FF、Safari、OP不同浏览器兼容报告柯伯勋2011-03-08上海万得资讯科技有限公司Shanghai Wind Information Co., Ltd.地址: 上海浦东新区福山路33号建工大厦9楼邮编Zip : 200120电话T el : (8621)6886 2280传真Fax : (8621)6886 2281Email : sales@主页:1浏览器内核简介浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“解释引擎”，不过我们一般习惯将之称为“浏览器内核”。

负责对网页语法的解释（如HTML、JavaScript）并渲染（显示）网页。

所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。

不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

浏览器内核很多，如果加上所有的几乎没有什么人在用的非商业的免费内核，那么可能大约有10款以上甚至更多，不过通常我们比较常见的大约只有以下四种，下面先简单介绍一下。

1.1Trident：IE浏览器使用的内核,该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修改而来的，并沿用到目前的IE8。

Trident实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用IE内核而非IE的浏览器涌现（如Maxthon、The World 、TT、GreenBrowser、AvantBrowser等）。

此外，为了方便也有很多人直接简称其为IE内核（当然也不排除有部分人是因为不知道内核名称而只好如此说）。

由于IE本身的“垄断性”（虽然名义上IE并非垄断，但实际上，特别是从Windows 95年代一直到XP初期，就市场占有率来说IE的确借助Windows的东风处于“垄断”的地位）而使得Trident内核的长期一家独大，微软很长时间都并没有更新Trident内核，这导致了两个后果——一是Trident内核曾经几乎与W3C标准脱节（2005年），二是Trident内核的大量Bug等安全性问题没有得到及时解决，然后加上一些致力于开源的开发者和一些学者们公开自己认为IE浏览器不安全的观点，也有很多用户转向了其他浏览器，Firefox和Opera就是这个时候兴起的。

机构平台制作标准

机构平台制作标准一、制作标准1) 机构平台设计要反应出学校相符的需求以及主题，机构平台需设计出极具视觉吸引力、有很强的视觉识别性、能够引人入胜、过目难忘，首页的图案版面的艺术形式由为重要，要确保达到最佳的学校宣传效应。

2)机构平台的艺术形式要现代，简约，生动，可人，布局要舒展，大方。

3) 机构平台的风格要时尚、简洁、淡雅、丰富、和谐、流畅。

4) 机构平台颜色的需按学校调研的内容与需求的加以分别，选择同一风格色调的不同组合配色。

5) 机构平台的字体要美观。

不同字体的组合要协调，做到重点突出，图与文字、内容和谐整体、丰富而有机。

6) 所有的按钮可用图形，也用HTML，请酌情而定，总之要形式感强、好识别、美观，能为网页增色。

7) 设计机构平台背景图案。

要根据网页特点与主题提供背景图案的备选方案。

8)要设计实用的首页主菜单下大图9）机构平台的搭建要体现7个功能：（1）门户功能门户自定义功能，可以极大丰富用户的个性化需求。

并且功能更加丰富、体验更加便捷的门户，也能为使用者的工作带来极大的便利。

门户可以看作是某一类信息的集中展现，作为企业管理的一个重要手段，门户功能是实现政府、学校和企业重要信息分类汇总的极佳方法。

（2）入口功能集合政府、学校、企业的等入口。

便于快速访问以及查看相关信息。

（3）导航功能主要功能就是满足用户的需求，让用户的找到自己所需要的东西。

使其用户使用更简单、更快捷、更方便、更安全，更具备其网站的特色。

在满足用户需求的同时还需要注重于综合及实用，使他有自己主流的技术和特色的版块。

（4）搜索功能机构平台的“大门口”，一般在形式上包括两个要件：搜索入口和搜索结果页面，但在其后台架构上是比较复杂的，其核心要件包括：中文分词技术、页面抓取技术、建立索引、对搜索结果排序以及对搜索关键词的统计、分析、关联、推荐等。

最主要是节约用户查找东西的时间，提高资源的转化率。

（5）汇聚功能根据机构的性质集合其资源的整合，并展示给用户让其方便快捷的找到自己想要的信息！（6）展示功能根据政府、学校、企业的自身特点，将想要展示的东西展示在自己的机构平台上！让用户更直观的了解。

史上最全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>后面，多余的字也同样消失，页面正常显示。

浏览器兼容问题及解决方案

浏览器兼容问题及解决⽅案所谓的浏览器兼容性问题，是指因为不同的浏览器对同⼀段代码有不同的解析，造成页⾯显⽰效果不统⼀的情况。

在⼤多数情况下，我们的需求是，⽆论⽤户⽤什么浏览器来查看我们的⽹站或者登陆我们的系统，都应该是统⼀的显⽰效果。

所以浏览器的兼容性问题是前端开发⼈员经常会碰到和必须要解决的问题。

浏览器最关键的部分就是它的渲染引擎（Rendering Engine），也就是⼤家平常所说的的“内核”。

市场上浏览器种类很多，不同浏览器的内核也不尽相同，所以各个浏览器对⽹页的解析存在⼀定的差异。

常见的浏览器内核代表有五种，分别是Trident、Gecko、Blink、Webkit、Presto 。

他们代表的浏览器是：Trident:IE、Maxthon(遨游)、腾讯、Theworld世界之窗、360浏览器；Gecko：代表作品Mozilla Firefox 是开源的,它的最⼤优势是跨平台，能在Microsoft Windows、Linux和MacOS X等主要操作系统上运⾏；Webkit :代表作品Safari、Chrome ，是⼀个开源项⽬；Presto :代表作品Opera ，Presto是由Opera Software开发的浏览器排版引擎。

它也是世界上公认的渲染速度最快的引擎；Blink ：由Google和Opera Software开发的浏览器排版引擎，2013年4⽉发布。

下⾯介绍⼀些常见的浏览器兼容问题及解决⽅案。

1、不同浏览器的标签默认的外补丁和内补丁不同解决⽅案： css ⾥增加通配符 * { margin: 0; padding: 0; }。

2、IE6双边距问题；在 IE6中设置了float , 同时⼜设置margin , 就会出现边距问题解决⽅案：设置display:inline;3、当标签的⾼度设置⼩于10px，在IE6、IE7中会超出⾃⼰设置的⾼度解决⽅案：超出⾼度的标签设置overflow:hidden,或者设置line-height的值⼩于你的设置⾼度4、图⽚默认有间距解决⽅案：使⽤float 为img 布局。

阮一峰CSS使用技巧

阮一峰的网络日志»首页»档案上一篇：一封博士研究生的遗书下一篇：关于高晓松，以及其他的分类：开发者手册CSS使用技巧作者：阮一峰日期：2010年3月31日最近，我开始升级网志了。

在修改模板的过程中，需要重写CSS样式表。

正好看到有一篇CSS常用技巧的总结文章，我就把它整理出来，供自己参考，也希望对大家有用。

未来，本文将持续更新。

1. 文字的水平居中将一段文字置于容器的水平中点，只要设置text-align属性即可：text-align:center;2. 容器的水平居中先为该容器设置一个明确宽度，然后将margin的水平值设为auto即可。

div#container {width:760px;margin:0 auto;}3. 文字的垂直居中单行文字的垂直居中，只要将行高与容器高设为相等即可。

比如，容器中有一行数字。

<div id="container">1234567890</div>然后CSS这样写：div#container {height: 35px; line-height: 35px;}如果有n行文字，那么将行高设为容器高度的n分之一即可。

4. 容器的垂直居中比如，有一大一小两个容器，请问如何将小容器垂直居中？<div id="big"><div id="small"></div></div>首先，将大容器的定位为relative。

div#big{position:relative;height:480px;}然后，将小容器定位为absolute，再将它的左上角沿y轴下移50%，最后将它margin-top上移本身高度的50%即可。

div#small {position: absolute;top: 50%;height: 240px;margin-top: -120px;}使用同样的思路，也可以做出水平居中的效果。

Web前端兼容性指南

Web前端兼容性指南⼀、Web前端兼容性问题⼀直以来，Web前端领域最⼤的问题就是兼容性问题，没有之⼀。

前端兼容性问题分三类：浏览器兼容性屏幕分辨率兼容性跨平台兼容性1、浏览器兼容性问题第⼀次浏览器⼤战发⽣在上个世纪90年代，微软发布了IE浏览器，和⽹景公司的Netscape Navigator⼤打出⼿，1998年⽹景不得不将公司卖给AOL。

没有了对⼿的IE不思进取，W3C标准⽀持发展缓慢，为以后的IE兼容性灾难埋下了伏笔。

到2004年，IE的市场份额达到95%，但在此之后IE的份额逐步遭其他浏览器蚕⾷，主要包括Firefox，Chrome，Safari和Opera。

.2001年8⽉27⽇，微软发布IE6，时隔五年直到2006年才发布了IE7。

2009年3⽉19⽇，经历了众多测试版后，IE8最终发布，虽然IE8针对旧版IE在多⽅⾯做了很⼤改进，但在HTML5、CSS 3等标准⽀持⽅⾯仍落后于其他浏览器对⼿。

这三个版本的IE是所有兼容性问题的最⼤根源，堪称前端噩梦。

IE6、7、8不⽀持HTML5、CSS3、SVG标准，可被判定为“极难兼容”IE9不⽀持Flex、Web Socket、WebGL，可被判定为“较难兼容”IE10部分⽀持Flex（-ms-flexbox）、Web Socket，可被判定为“较易兼容”IE11部分⽀持Flex、WebGL，可被判定为“较易兼容”IE6、7、8、9可视为“⽼式浏览器”IE10、11可视为“准现代浏览器”Chrome、Firefox、Safari、Opera 、Edge可视为“现代浏览器”浏览器与Windows版本份额Statcounter的各项数据以2020年6⽉为基准。

2、屏幕分辨率兼容性问题在不同的屏幕分辨率，浏览器页⾯展⽰差异很⼤。

特别是屏幕分辨率较⼩时，容易发⽣布局错乱。

为了解决这个问题，响应式UI框架应运⽽⽣。

主流桌⾯屏幕分辨率宽度集中在1280~1920，⾼度集中在720~1080；主流平板屏幕分辨率宽度集中在962~1280，⾼度集中在601~800。

div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等浏览器方法

_margin:0px;前面加个下划线“_“为单独控制IE6IE8和firefox选择！importantbackground-color:#FF0000 !important;IE7支持*background-color:#0000FF;（即对这个感冒）1.DOCTYPE 影响CSS 处理2.FF: div 设置margin-left, margin-right 为auto 时已经居中, IE 不行3.FF: body 设置text-align 时, div 需要设置margin: auto(主要是margin-left,margin-right) 方可居中4.FF: 设置padding 后, div 会增加height 和width, 但IE 不会, 故需要用!important 多设一个height 和width5.FF: 支持!important, IE 则忽略, 可用!important 为FF 特别设置样式6.div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高line-height:200px; 然后插入文字，就垂直居中了。

缺点是要控制内容不要换行7.cursor: pointer 可以同时在IE FF 中显示游标手指状，hand 仅IE 可以8.FF: 链接加边框和背景色，需设置display: block, 同时设置float: left 保证不换行。

参照menubar, 给 a 和menubar 设置高度是为了避免底边显示错位, 若不设height, 可以在menubar 中插入一个空格。

9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反，据阿捷的说法! important这个属性IE不能识别，但别的浏览器可以识别。

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等)。

Hack 文档

有关CCS HACK（IE&Firefox）个人（Lynn）收集整理：1.区分IE 6 ，7，8 、FF、Safari、Opera例子：<div class="class">背景测试</div>.class{background-color:red; /*IE8,FF3*/*background-color:blue; /*IE7*/_background-color:green; /*IE6*/}@media all and (min-width:0){.class{background-color:pink; /*这里所指代的Safari和Opera一般为最新版本*/}}IE6：IE7：IE8：FF3：Safari和Opera：2.区分FF2与FF最新版本例子：<div class="class">背景测试</div>div, x:-moz-any-link { color: gray} /*给FF2单独添加样式：字体颜色为灰色*/div, x:-moz-any-link, x:default { color:blue } /*这里所指代的FF一般为最新版本*/FF2：FF最新:3.仅Firefox 3 和IE7识别的Hack 其他浏览器均不识别例子：<div class="class">背景测试</div>div, x:-moz-any-link, x:default {background-color:red;}FF3：IE7：4.IE6.7.8 Hack例子：<div class="e">背景测试</div>.e{background-color:Purple;/*IE8*/}html* .e{background-color:red; /*IE6、7*/}*+html .e{background-color:gray; /*IE7*/}* html .e{background-color:green; /*IE6*/}IE6：IE7：IE8：总结：1.区分IE6 与FF：.class{ background:orange; *background:blue;}IE6：FF：2.区分IE6与IE7：.class{ background:orange !important;background:blue;}IE6：IE7：3.区分IE7和FF.class{ background:orange;*background:green;}FF：IE7：4.区分FF,IE7,IE6.class{ background:blue; *background:green !important;*background:orange;}IE6：IE7：IE8：5.仅IE7识别*+html{…}当面临需要只针对IE7做样式的时候就可以采用这个HACK。

Css选择器命名规则

操作系统版本：Windows 7浏览器版本：IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.356.2 dev 受影响的浏览器：所有浏览器.经常讲到css选择器命名规则，其实不只是在团队合作基础上来讲这个，每个浏览器,IE产品，火狐，苹果，谷歌，都会因为命名不规范会产生不同样式..一、关于选择器的命名W3C CSS2.1的 4.1.3 节中提到：标识符（包括选择器中的元素名，类和ID）只能包含字符[a- zA-Z0-9]和ISO 10646字符编码U+00A1及以上，再加连字号（-）和下划线（_）；它们不能以数字，或一个连字号后跟数字为开头。

它们还可以包含转义字符加任何ISO 10646字符作为一个数字编码。

由于设计到的字符很多，本文只针对字符[a-zA-Z0-9]，再加连字号（-）和下划线（_）进行讨论。

关于CSS中允许使用的字符和大小写信息，请参考W3C CSS2.1的4.1.3节二、差异及可能产生的问题在W3C CSS2.1说明文档中，只提到选择器标识符不能以数字，或一个连字号后跟数字为开头。

除此之外，没有相关的说明。

那么各浏览器下的表现是否遵循这一规则呢？请观察如下代码：12 3 4 5 6 7 8 9 1 0 1 1 1 2 div{width:160px;height:20px;font-size:12px;line-height: 20px;background- color:yellow;}.f-1_f_{background-color:#d4d4d4;}.1{background-color:#A8A8A8;}.123456{background-color:#d4d4d4;}.2demo{background-color:#A8A8A8;}.2-demo {background-color:#d4d4d4;}.2_demo {background-color:#A8A8A8;}13 14 15 16 17 18 19 2 0 2 1 2 2 2 3 2 4 2 5 2 6 2 7 2 8 2 9 3 0 3 1 3 2 3 3 3 4 .-demo{background-color:#d4d4d4;}.-2demo {background-color:#A8A8A8;} ._demo {background-color:#d4d4d4;} ._2demo {background-color:#A8A8A8;} .-{background-color:#d4d4d4;}.---{background-color:#A8A8A8;}._{background-color:#d4d4d4;} .——{background-color:#A8A8A8;}._-{background-color:#d4d4d4;}.-_{background-color:#A8A8A8;}.-{background-color:#d4d4d4;}.---_{background-color:#A8A8A8;}.---123{background-color:#d4d4d4;} .__123{background-color:#A8A8A8;}3536373839441421 23 45 67 89 1011 1213 1415 1617 1819 20<div class ="f-1_f_">字母开头</div ><div class ="1">单个数字</div ><div class ="123456">多个数字</div > <div class ="2demo">数字开头 + [a-z][A-Z]</div > <div class ="2-demo">数字 + "-" 开头</div > <div class ="2_demo">数字 + "_" 开头</div > <div class ="-demo">连字符(-)开头 + [a-z][A-Z]</div > <div class ="-2demo">连字符(-) + 数字开头</div > <div class ="_demo">下划线(_)开头 + [a-z][A-Z]</div > <div class ="_2demo">下划线(_) + 数字开头</div > <div class ="-">单个连字符(-)</div > <div class ="---">多个连字符(-)</div > <div class ="_">单个下划线(_)</div ><div class =" ">多个下划线(_)</div ><div class="_-">下划线(_) + 连字符(-)</div><div class="-_">连字符(-) + 下划线(_)</div><div class=" -">多个下划线(_) + 连字符(-)</div> <div class="---_">多个连字符(-) + 下划线(_)</div><div class="---123">多个连字符(-) + 数字</div><div class=" 123">多个下划线(_) + 数字</div>看看各浏览器下面的结果观察上表，分析各浏览器下的表现，总结如下从上面看到，我们可以直观的了解到选择器的命名在各浏览器下的支持情况有所不同。

各主流浏览器hack写法

H A C Kie6~ie9 hack兼容写法已测试selector{background-color:#f00;/*all*/background-color:#0ff＼０;/* ie 8/9 */background-color:#0f0＼９＼０;/* ie9 */*background-color:#00f;/*ie7*/_background-color:#ff0;/*ie6*/background-color//:#090;/*非IE*/background-color:#900＼9;/*所有ie*/-webkit-Background-colot:#900;/*safir浏览器兼容*/-ms-Background-colot:#900;/*ie8浏览器兼容*/-moz-Background-colot:#900;/*firfox火狐浏览器兼容*/ Background-colot:#900;/*all*/Background-colot:#900\0;/*ie9兼容*/Background-colot:#900\9;/*专门针对ie7\6\8的兼容*/ Background-colot:#900\9 \0;/*ie8\9兼容*/Background-colot:#900\0;/*专门针对ie8的兼容*/*Background-colot:#900;/*ie7、6兼容*/+Background-colot:#900;/*专门针对ie7的兼容*/或*+Background-colot:#900;/*专门针对ie7的兼容*/_Background-colot:#900;/*ie6的兼容代码*/Background-colot:#900 !important;/*专门针对ie7和火狐的兼容*/ body:nth-of-type(1) p{color:red;} /*火狐和safir*/}三、CSS hack写法书写顺序为FireFox在最前，其次是IE8、IE7，最后是IE6。

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透明度。

最全整理浏览器兼容性问题与解决方案

常见浏览器兼容性问题与解决方案所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。

在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。

所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

在学习浏览器兼容性之前，我想把前端开发人员划分为两类：第一类是精确按照设计图开发的前端开发人员，可以说是精确到1px的，他们很容易就会发现设计图的不足，并且在很少的情况下会碰到浏览器的兼容性问题，而这些问题往往都死浏览器的bug，并且他们制作的页面后期易维护，代码重用问题少，可以说是比较牢固放心的代码。

第二类是基本按照设计图来开发的前端开发人员，很多细枝末节差距很大，不如间距，行高，图片位置等等经常会差几px。

某种效果的实现也是反复调试得到，具体为什么出现这种效果还模模糊糊，整体布局十分脆弱。

稍有改动就乱七八糟。

代码为什么这么写还不知所以然。

这类开发人员往往经常为兼容性问题所困。

修改好了这个浏览器又乱了另一个浏览器。

改来改去也毫无头绪。

其实他们碰到的兼容性问题大部分不应该归咎于浏览器，而是他们的技术本身了。

文章主要针对的是第一类，严谨型的开发人员，因此这里主要从浏览器解析差异的角度来分析兼容性问题。

浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding 差异较大。

碰到频率:100%解决方案：CSS里*备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS 文件开头都会用通配符*来设置各个标签的内外补丁是0。

浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大问题症状:常见症状是IE6中后面的一块被顶到下一行碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）解决方案：在float的标签样式控制中加入display:inline;将其转化为行内属性备注：我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。

让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法

如有雷同，不胜荣幸，若转载，请注明让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法最近做一个Web网站，之前一直觉得bootstrap非常好，这次使用了bootstrap3,在chrome,firefox,safari,opera，360浏览器（极速模式）、搜狗浏览器等浏览器下均没有问题，而在IE8及IE11下发现样式无法显示，然后各种百度啊，最后在雅朋网的一个网友帖子的帮助下解决了问题，也参考了千寻学习网的资料，先将解决方法总结如下：首先需要确保你的HTML页面开始部分要有DOCTYPE声明。

DOCTYPE告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档，具体会影响：对标记attributes 、properties的约束规则对浏览器的渲染模式产生影响，不同的渲染模式会影响到浏览器对于CSS代码甚至JavaScript脚本的解析DOCTYPE是非常关键的，目前的最佳实践就是在HTML文档的首行键入：<!DOCTYPE html>大神的帖子总结的bootstrap的查找原因好几条，首先，Bootstrap3 是移动设备优先的原则开发的，所以原因可能如下：1.没有正确调用远程地址即只要是IE9以下，就调用两个专门的js但是我测试发现仅仅使用以上js文件不可行，2.调用方法不正确不要用file://或@import形式引用respond.min.js或respond.js或css文件3.针对浏览器的内容做标识（使用meta标签调节浏览器的渲染方式）bootstrap不支持IE兼容模式，为了让IE浏览器运行最新的渲染模式，将添加以下标签在页面中<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />IE=edge表示强制使用IE最新内核，chrome=1表示如果安装了针对IE6/7/8等版本的浏览器插件Google Chrome Frame（可以让用户的浏览器外观依然是IE的菜单和界面，但用户在浏览网页时，实际上使用的是Chrome浏览器内核），那么就用Chrome内核来渲染。

CSS hack用法大全(举例详解)

IE8和Firefox、Opera、Safari选择第一个，即：background-color:#FF0000 !important;（IE8完全感冒于important，同时丢弃了对*的感情）
另外再补充一个，下划线"_",
IE6支持下划线，IE7、IE8和Firefox、Opera、Safari均不支持下划线。
3.区别IE6、IE7、Firefox (EXP 1)
【区别符号】：「*」、「_」
【示例】：
#divcss5{
background:blue; /*Firefox背景变蓝色*/
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
</head>
<body>
你正在使用：



<br><br>
【区别符号】：「*」、「!important」
【示例】：
#divcss5{
background:blue; /*Firefox 背景变蓝色*/
*background:green !important; /*IE7 背景变绿色*/

Html-Css-iframe的自适应高度方案

Html-Css-iframe的⾃适应⾼度⽅案先看⼀个⽰例，有两个页⾯，1.html通过iframe嵌⼊2.html，两个页⾯都是同域的a.html<!DOCTYPE html><html><head><meta charset='utf-8' /><title>1.html</title></head><body><iframe id="ifr" src="b.html" frameborder="0" width="100%"></iframe></body></html>b.html，很多P元素将⾼度撑⾼⼀些<!DOCTYPE html><html><head><meta charset="utf-8"><title>b.html</title></head><body><p>这是⼀个ifrmae，嵌⼊在http://snandy.github.io/lib/iframe/1.html⾥</p><p>根据⾃⾝内容调整⾼度</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p></body></html>此时，浏览器访问1.html，效果如图可以看到，嵌⼊的iframe出现了滚动条，需求是不想出现滚动条，页⾯多⾼就显⽰多少。

DIV和CSS总结

DIV和CSS总结IE6下，DIV容器和padding之和，是DIV所占区域的总宽度（IE8时DIV容器所占区域总宽度不需要计算padding）真实宽度=width+padding+border+margin!important强调声明前面的语句有效性。

比如设置了:padding:0px!important;padding:10px;后面的重要性就不如前面带声明的！一、设置为float的div在IE6下margin会加倍解决方法一：是在这个div里面加上display:inline。

但是会导致内容区域的第一行文字出现缩进，和之后的行不对齐，应该再加一层div解决如：＜#div id="imfloat"> 相应的css为#imfloat{float:left; margin:5px; /*IE下理解为10px*/ display:inline; /*IE下再理解为5px*/}解决方法二：通过!important这样的手段hack。

（这里面有3种形式）第一种：.div { background:orange;/*ff*/*background:green !important;/*ie7*/*background:blue; /*ie6*/ }第二种：.div { margin:10px;/*ff*/*margin:15px;/*ie7*/_margin:15px;/*ie6*/ }第三种：#div { color: #333; } /* ff */* html #div { color: #666; } /* IE6 */*+html #div { color: #999; } /* IE7 */二、IE6和IE8下的导航菜单有时候鼠标放上，IE8会有背景色而IE6没有，这时候要给区域加上高度和宽度，试试height:auto;width:88px二、在google、IE8、Firefox中margin-top的兼容在这些浏览器中，有两个嵌套关系的div，如果外层div的父元素padding值为0，那么内层div的margin-top或者margin-bottom的值会“转移”给外层div。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

小知识：什么是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依次排列。

一、CSS HACK以下两种方法几乎能解决现今所有HACK.1, !important随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)<style>#wrapper{width: 100px!important; /* IE7+FF */width: 80px; /* IE6 */}</style>2, IE6/IE77对FireFox*+html 与*html 是IE特有的标签, firefox 暂不支持.而*+html 又为IE7特有标签.<style>#wrapper{#wrapper { width: 120px; } /* FireFox */*html #wrapper { width: 80px;} /* ie6 fixed */*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序*/}</style>注意:*+html 对IE7的HACK 必须保证HTML顶部有如下声明：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd">二、万能float 闭合关于clear float 的原理可参见[How To Clear Floats Without Structural Markup]将以下代码加入Global CSS 中,给需要闭合的div加上class="clearfix" 即可,屡试不爽.<style>/* Clear Fix */.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;}/* Hide from IE Mac */.clearfix {display:block;}/* End hide from IE Mac *//* end of clearfix */</style>三、其他兼容技巧1, FF下给div 设置padding 后会导致width 和height 增加, 但IE不会.(可用!important解决)2, 居中问题.1).垂直居中.将line-height 设置为当前div 相同的高度, 再通过vertical-align: middle.( 注意内容不要换行.)2).水平居中. margin: 0 auto;(当然不是万能)3, 若需给a 标签内内容加上样式, 需要设置display: block;(常见于导航标签)4, FF 和IE 对BOX 理解的差异导致相差2px 的还有设为float的div在ie下margin加倍等问题. 5, ul 标签在FF 下面默认有list-style 和padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)6, 作为外部wrapper 的div 不要定死高度, 最好还加上overflow: hidden.以达到高度自适应.7, 关于手形光标. cursor: pointer. 而hand 只适用于IE.1 针对firefox ie6 ie7的css样式现在大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。

现在写一个CSS可以这样：#1 { color: #333; } /* Moz */* html #1 { color: #666; } /* IE6 */*+html #1 { color: #999; } /* IE7 */那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999。

2 css布局中的居中问题主要的样式定义如下：body {TEXT-ALIGN: center;}#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }说明：首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。

但在mozilla中不能居中。

解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT:auto;MARGIN-LEFT: auto; ”需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

3 盒模型不同解释#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}4 浮动ie产生的双倍距离#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离display:inline; //使浮动忽略}这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素);#box{ display:block; //可以为内嵌元素模拟为块元素display:inline; //实现同一行排列的的效果diplay:table;IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。

这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。

比如要设置背景图片，这个宽度是比较重要的。

要解决这个问题，可以这样：#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}6 页面的最小宽度min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。

但IE不认得这个，而它实际上把width当做最小宽度来使。

为了让这一命令在IE上也能用，可以把一个<div> 放到<body> 标签下，然后为div指定一个类：然后CSS这样设计：#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML 文档不太正规。

它实际上通过Javascript的判断来实现最小宽度。

7 清除浮动.hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ clear:both;}或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。

这种的最麻烦的......#box:after{ content: "."; display: block; height: 0;clear: both; visibility: hidden;}8 DIV浮动IE文本产生3象素的bug左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键}HTML代码<div id="box"> <div id="left"></div> <div id="right"></div></div>9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)p[id]{}div[id]{}这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.10 IE捉迷藏的问题当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。