主流浏览器的CSS兼容问题
IE11的CSS兼容性问题
IE11的CSS兼容性问题 最近测试给了我⼀⼤堆BUG，⼀瞅发现全是IE11的。
吐槽⼀下这个浏览器真的⽐较特⽴独⾏。
很多默认的样式跟别的浏览器不同，⽽且最明显的⼀点应该是padding左右内边距往往⽐别的浏览器⼤了⼀倍。
但是当需要修改的时候⼜头疼了。
如果改变原有的padding值，那么在IE11⽣效了。
别的浏览器⼜有问题了。
于是在⽹上搜了⼀下有没有专门针对IE11的CSShack，就是只对IE11⽣效的CSS样式，⼀查还真有。
就是在CSS样式⽂件中加⼀个@media screen and(-ms-high-contrast:active),(-ms-high-contrast:none){⾥⾯是你的样式}。
⽐如，我在chrome浏览器中给⼀个div设置样式 div{ padding:0 12px; } 那么，在IE11中想要实现上⾯效果，需要在这个下⾯再添加⼀⾏样式 div{ padding:0 12px; } @media screen and(-ms-high-contrast:active),(-ms-high-contrast:none) { div{padding:0 6px;} } 这⾥需要注意⼀下IE11的样式要写在最后⾯防⽌被覆盖，当浏览器为IE11时，@media中的样式会被执⾏⼀遍。
还有⼀个就是IE11针对h5的表单验证部分，验证失败后input标签会出现⼀个红⾊的框，⽐较丑。
这个时候你只要针对专门的input标签，增加⼀个input{outline:none};就可以将红⾊的边框去掉了。
2016/01/15更新 今天⼤拿直接⼀⾏代码把我之前的IE11兼容性问题全解决了。
不服不⾏。
⼩伙伴们下次遇到兼容性问题记得先加上这⾏代码试试，不⾏再按照上⾯的⽅法来吧TAT，贴出代码 * { box-sizing: content-box; -moz-box-sizing: inherit; -webkit-box-sizing: inherit; }。
CSS浏览器兼容性处理解决不同浏览器的样式差异
CSS浏览器兼容性处理解决不同浏览器的样式差异CSS浏览器兼容性处理：解决不同浏览器的样式差异在网页设计与开发过程中，我们经常会遇到在不同浏览器下显示效果不一致的情况。
这是由于不同浏览器对CSS样式的解析和支持程度不同导致的。
为了解决这些浏览器的兼容性问题，我们需要采取一些措施，使得网页在各种浏览器下都能够达到一致的效果。
本文将介绍一些常见的CSS兼容性处理技巧，帮助您解决不同浏览器的样式差异。
一、CSS hack技巧1. 选择器优先级在CSS中，选择器的优先级决定了哪个样式会被浏览器应用。
可以通过提高选择器的优先级来确保样式被正确地应用。
一般来说，ID选择器的优先级最高，紧接着是类选择器和属性选择器，最后是标签选择器。
2. 浏览器前缀某些CSS属性在不同浏览器下需要添加前缀才能得到正确的效果，例如-webkit、-moz和-o等。
通过添加不同浏览器的前缀，可以确保样式在各个浏览器中一致地显示。
可以使用CSS预处理器如Sass或Less来自动生成带有前缀的代码。
3. 条件注释条件注释是一种只有特定浏览器会解析的代码，通过条件注释可以为不同浏览器提供不同的样式。
例如：<!--[if IE]>xxx<![endif]--> 可以仅在IE浏览器中应用xxx样式，从而解决IE浏览器的兼容性问题。
二、CSS兼容性库1. Normalize.cssNormalize.css是一个跨浏览器的CSS文件，它几乎可以为所有的HTML元素提供一致的默认样式。
通过引入Normalize.css，可以统一各个浏览器的默认样式，从而避免不同浏览器之间的样式差异。
2. AutoprefixerAutoprefixer是一个基于CSS规范的自动添加浏览器前缀的工具。
它可以根据你设置的浏览器兼容范围自动添加所需的前缀，大大简化了处理浏览器兼容性的工作。
三、媒体查询1. 响应式设计媒体查询是CSS3的一个重要特性，它可以根据不同的设备或屏幕尺寸应用不同的样式，从而实现响应式设计。
解决CSS浏览器兼容性问题的4种方案
解决CSS浏览器兼容性问题的4种⽅案前端是⼀个苦逼的职业，不仅因为技术更新快，⽽且要会的东西实在太多了，更让⼈头疼的是，还要⾯临各种适配、兼容性问题。
为什么会有浏览器兼容性问题？还不是因为浏览器⼚商太多了！Chrome，Frirefox，Safari，Edge，IE6，IE7，IE8，IE9...360安全浏览器，qq浏览器，世界之窗，TT，搜狗，opera，maxthon（傲游）……关键是不同⼚商，甚⾄同⼀⼚商不同版本，对同⼀段CSS的解析效果也不⼀致，这就导致了页⾯显⽰效果不统⼀，也就带来了兼容性问题。
多么希望Chrome能够⼀统江湖啊~~⽬前各浏览器市场份额浏览器这么多，我们也不可能每⼀个都要去兼容，对于⽤户量⼀般的产品，把主流浏览器的适配做好，就已经很不错啦。
根据百度流量研究院提供的2018年8⽉⾄2019年2⽉的数据可以看出，Chrome占⽐46.28%，IE系仍然占有很⼤⽐重，任重⽽道远啊~CSS浏览器兼容性问题的解决思路和⽅案今天，不想去关注太多细节问题，⽐如那个css样式需要我们去兼容，⽽是想讨论⼀下⼤的解决思路，主要包括4个⽅⾯，浏览器CSS样式初始化、浏览器私有属性，CSS hack语法和⾃动化插件。
1. 浏览器CSS样式初始化由于每个浏览器的css默认样式不尽相同，所以最简单有效的⽅式就是对其进⾏初始化，相信很多朋友都写过这样的代码，在所有CSS开始前，先把marin和padding都设为0，以防不同浏览器的显⽰效果不⼀样。
*{margin: 0;padding: 0;}关于浏览器CSS样式初始化，经验不丰富的话，可能也不知道该初始化什么，这⾥给⼤家推荐⼀个库，Normalize.css，github star数量接近3.4万，选取展⽰其中⼏个样式设置，如下html {line-height: 1.15; /* Correct the line height in all browsers */-webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. */}body {margin: 0;}a {background-color: transparent; /* Remove the gray background on active links in IE 10. */}img {border-style: none; /* Remove the border on images inside links in IE 10. */}通过CSS样式初始化，相信能解决不少常规的兼容性问题，接下来再看看浏览器的私有属性。
CSS浏览器兼容性与解决方法
CSS浏览器兼容性与解决⽅法⼀.什么是浏览器兼容性问题？所谓的浏览器兼容性问题，是指不同的浏览器对同⼀段代码有不同的解析，造成页⾯显⽰效果不统⼀的情况；⽽造成浏览器兼容问题的根本原因，是浏览器的内核不同导致的。
认识浏览器内核浏览器类型内核 js引擎IE Trident jscriptFirefox Gecko TraceMonkeyChrome WebKit, Blink V8Safari WebKit SquirrelFish ExtremeOpera Presto Carakancss浏览器兼容性问题的解决思路和⽅案1.使⽤css Hack解决兼容性问题浏览器在读取CSS代码的时候可能会遇到⼀些⽆法识别的代码，造成这种现象的原因通常有两种：1. 代码本⾝有问题，如： bg:red ，bg并不是⼀个有效的css属性2. 代码没问题，但浏览器的内核不能识别，如： box-sizing:border-box ，这句代码本⾝没有问题，但由于使⽤的是CSS3的属性box-sizing ，会造成在⼀些低版本内核的浏览器中⽆法识别。
总之，当浏览器遇到这些⽆法识别的代码时，它会怎么做呢？和java、C#等后端语⾔不同，浏览器不会中⽌程序的执⾏，它会⽴即跳过这些⽆法识别的代码，就当作没看见⼀样，继续执⾏后⾯的代码。
就向下⾯这个例⼦⼀样：.main{color1 : red; /*这句代码⽆法被浏览器识别，浏览器就当这句代码不存在*/color: green;}浏览器⽅⾯，除了拥有这种特殊的错误处理⽅式之外，不同的浏览器内核，以及浏览器内核的不同版本，它们同时拥有⾃⼰独特的CSS属性，这些属性在CSS标准之外。
造成这种现象的原因是⼀些历史遗留问题。
⽐如，webkit内核的浏览器能够识别-webkit-box-sizing:border-box; ，在没有box-sizing的年代，它就是通过-webkit-box-sizing 来设置盒⼦宽⾼影响范围的，但其他内核的浏览器是⽆法识别该属性的。
前端开发中常见的浏览器兼容性问题与解决方案
前端开发中常见的浏览器兼容性问题与解决方案随着移动互联网及云计算的迅速发展，前端开发也越来越重要。
然而，不同浏览器之间的差异性造成了许多兼容性问题，给开发者带来了不小的困扰。
本文将介绍一些前端开发中常见的浏览器兼容性问题，并提供一些解决方案。
一、CSS兼容性问题1. 盒模型差异：不同浏览器对盒模型的解析方式有所不同，主要体现在边框和内边距的计算上。
解决方案是使用CSS的box-sizing属性将盒模型设置为border-box，以保证在不同浏览器中的显示效果一致。
2. 行内元素的内外边距：在IE6及更早的版本中，行内元素会忽略内外边距的设置。
解决方案是将行内元素转换为块级元素，或者使用display:inline-block属性来呈现行内块元素的效果。
3. 清除浮动：不同浏览器对清除浮动的方式支持度各不相同。
常用的清除浮动方法有使用overflow:hidden属性、添加空元素并清除浮动、使用clearfix类等。
二、JavaScript兼容性问题1. DOM操作差异：不同浏览器对于DOM操作的实现方式存在差异，例如通过innerHTML属性插入HTML片段在IE中可能导致内存泄漏。
解决方案是尽量使用createElement和appendChild等原生DOM方法来进行元素的动态创建和操作。
2. 事件处理差异：不同浏览器对于事件处理的机制有所不同，例如IE不支持事件捕获，而是通过attachEvent方法进行事件绑定。
解决方案是使用事件委托的方式来减少事件绑定的数量，同时可以借助框架如jQuery等来解决跨浏览器兼容性问题。
3. AJAX兼容性：不同浏览器对XMLHttpRequest对象的支持有所不同，特别是IE6及更早的版本。
解决方案是使用封装好的Ajax库或者利用浏览器的原生ActiveXObject对象来实现跨浏览器的AJAX请求。
三、HTML5兼容性问题1. 标签支持度不足：HTML5中的一些新标签如<header>、<nav>、<section>等在旧版本的浏览器中可能无法正确解析。
CSS浏览器兼容性的各种代码解决方案
CSS浏览器兼容性的各种代码解决方案1. 使用厂商前缀：不同浏览器厂商会实现一些试验性的CSS属性和值，为了兼容不同的浏览器，我们可以使用相应的厂商前缀。
例如，对于使用Flex布局的情况，可以使用-webkit-、-moz-和-ms-等前缀来适应不同的浏览器引擎。
2. 使用CSS Reset：浏览器的默认样式存在差异，使用CSS Reset 可以将所有浏览器的默认样式统一、常见的CSS Reset方案有Eric Meyer's Reset CSS和normalize.css等。
3. 使用CSS Hack：CSS Hack是通过特定的选择器和属性值来针对特定的浏览器进行样式修正的技巧。
例如，为了兼容IE 6、7、8浏览器，可以使用条件注释或特定的选择器来应用不同的样式。
5.使用媒体查询：媒体查询可以根据不同的设备和屏幕大小应用不同的CSS样式。
通过使用媒体查询，可以为不同的浏览器和设备提供优化的样式。
6. 使用polyfill或fallback方案：Polyfill是在旧版浏览器中填充不支持的CSS功能的JS代码。
如果一些浏览器不支持一些CSS属性，可以使用Polyfill来提供类似的效果。
Fallback方案是通过提供替代的CSS样式来兼容不支持一些属性的浏览器。
7. 使用autoprefixer：Autoprefixer是一个自动添加浏览器前缀的工具，可以根据选择的浏览器和CSS规范自动添加相应的前缀，避免手动添加前缀的繁琐工作。
8. 使用CSS3 PIE：CSS3 PIE是一个让IE6-9浏览器支持CSS3的工具，可以通过引入PIE.htc文件来实现圆角、阴影、渐变等CSS3效果在IE中的兼容显示。
9. 使用Flexbox布局：Flexbox布局是一种强大的CSS布局方式，但在不同的浏览器上存在一些兼容性问题。
可以使用-webkit-、-moz-和-ms-等前缀以及一些兼容性的属性值来解决兼容性问题。
最全的CSS浏览器兼容问题整理（IE6.0、IE7.0与FireFox）（收藏）
最全的CSS浏览器兼容问题整理（IE6.0、IE7.0与FireFox）（收藏）CSS 对浏览器的兼容性有时让⼈很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从⽹上收集了IE7,6与Fireofx的兼容性处理⽅法并整理了⼀下.对于web2.0的过度,请尽量⽤xhtml格式写代码,⽽且DOCTYPE 影响 CSS 处理,作为W3C的标准,⼀定要加DOCTYPE声名.常见问题1.div的垂直居中问题vertical-align:middle; 将⾏距增加到和整个DIV⼀样⾼ line-height:200px; 然后插⼊⽂字，就垂直居中了。
缺点是要控制内容不要换⾏2. margin加倍的问题设置为float的div在ie 下设置的margin会加倍。
这是⼀个ie6都存在的bug。
解决⽅案是在这个div⾥⾯加上display:inline;例如：<#div id=”imfloat”>相应的css为#IamFloat{float:left;margin:5px;/*IE下理解为10px*/display:inline;/*IE下再理解为5px*/}3. 浮动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;4 IE与宽度和⾼度的问题IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。
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等)。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
主流浏览器的CSS兼容问题解析浏览器的不兼容，大家肯定都是深恶痛绝的，往往我们只是去做修补，却忘了更重要的事情，那就是追溯根源，避免类似的不兼容再次出现。
在下不才，归纳几点html编码要素，望能指点各位：1.文字本身的大小不兼容。
同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。
解决方案：给文字设定line-height 。
确保所有文字都有默认的 line-height 值。
这点很重要，在高度上我们不能容忍1px 的差异。
2.ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。
所以不要轻易给容器定义height。
3.还讨论内容撑破容器问题，横向上的。
如果float 容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折行。
故，内容可能撑破的浮动容器需要定义width。
小实验：有兴趣大家可以看看这段实验。
在不同浏览器下分别测试以下各项代码。
a.<div style=”border:1px solid red;height:10px”></div>b.<div style=”border:1px solid red;width:10px”></di v>c.<div style=”border:1px solid red;float:left”></div>d.<div style=”border:1px solid red;overflow:hidden”></div>上面的代码在不同浏览器中是不一样的，实验起源于对小height 值div 的运用，<div style=”height:10px;overflow:hidden”></div>，小height 值要配合overflow:hidden一起使用。
实验好玩而已，想说明的是，浏览器对容器的边界解释是大不相同的，容器内容的影响结果各不相同。
4.浮动的清除，ff下不清除浮动是不行的。
纠正大家一个误区，遇到不兼容就说ff烂是不对的，其实更多时候是ie的奇怪表现让我们无所适从。
以下列出ie6的种种劣迹。
5.最被痛恨的，double-margin bug。
ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。
解决方案，给浮动容器定义display:inline。
6.mirrormargin bug，当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成margin-bottom:14px。
padding也会出现类似问题，都是ie6下的特产，该类bug 出现的情况较为复杂，远不只这一种出现条件，还没系统整理。
解决方案：外层元素设定border 或设定float。
引申：ff 和ie 下对容器的margin-bottom，padding-bottom的解释有时不一致，似乎与之相关。
7.吞吃现象，限于篇幅，我就不展开了。
还是ie6，上下两个div，上面的div 设置背景，却发现下面没有设置背景的div 也有了背景，这就是吞吃现象。
对应上面的背景吞吃现象，还有滚动下边框缺失的现象。
解决方案：使用zoom:1。
这个zoom好象是专门为解决ie6 bug而生的。
8.注释也能产生bug~~~“多出来的一只猪。
”这是前人总结这个bug使用的文案，ie6的这个bug 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。
解决方案：用“<!–[if !IE]> picRotate start <![endif]–>”方法写注释。
9.<li/>里加 float <div/>，这是一个典型的，棘手的兼容问题，希望引起大家正视，给li 不同的属性会有不同的解释效果，ff下的解释稍可理解，ie6下的解释会让你摸不着头脑，由于问题的复杂性，将另起一文专门讨论该问题。
在《ul使用心得》一文里有相关成果，却没给出问题解决的过程。
10.使用了“float:left;display:inline”的ul的奇怪表现。
可以看出这句css 是针对ie6下的double margin bug 而加上的display:inline，这也是我的css 体系里的重要一环，在《ul使用心得》一文中有相关阐述。
而这句css用在ul 上会让你痛苦不堪。
点到为止，这里不能多说哈。
11.img下的留白，大家看这段代码有啥问题：<div><img src=”” mce_src=”” /></div>把div的border打开，你发现图片底部不是紧贴着容器底部的，是img后面的空白字符造成，要消除必须这样写<div><img src=”” mce_src=”” /></div>后面两个标签要紧挨着。
ie7下这个bug 依然存在。
解决方案：给img设定display:block。
12.失去line-height。
<div style=”line-height:20px”><img />文字</div>，很遗憾，在ie6下单行文字 line-height 效果消失了。
，原因是<img />这个inline-block元素和inline元素写在一起了。
解决方案：让img 和文字都 float起来。
引申：大家知道img 的align 有 text-top，middle，absmiddle啊什么的，你可以尝试去调整img 和文字让他们在ie和ff下能一致，你会发现怎么调都不会让你满意。
索性让img 和文字都 float起来，用margin 调整。
13.链接的hover状态。
a:hover img{width:300px} 我们想让鼠标hover时，链接里包含的图片宽度变化，可惜在ie6下无效，ie7、ff下有效。
14.非链接的hover状态。
div:hover{} 这样的样式ie6是不认的，在ie7、ff 下才有效果。
15.block化的a链接，其内套absolute层，absolute层内放置img，ie下，鼠标点击img不会有链接效果，ff、op下正常。
想不出来了，以后想到再加吧。
上面的诸多问题如果你掌握了其中奥妙，90%的不兼容问题不需要另起css hack的。
16.无法彻底清除的float。
如果让ul下的li具有了float属性，如何clear 浮动的li呢？<ul><li class=”c”>< ></ul> 或者<ul><li><div>class=”c”></div>< ></ul> 或者<ul><li>< ><div>class=”c”></div></ul> 或者<ul><li>< ></ul><div>clas s=”c”></div> 或者上述的组合？这个问题，我无法给出解答。
下面有个例子与此相关<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN/TR/xhtml1/DTD/xhtml1-transitional.dtd><style type=text/css>.c{clear:both;overflow:hidden;+overflow:visible}.bd{border:1px solid red}ul.ex{list-style:none;}ul.ex li{float:left;border:1px solid green;}</style><ul class=ex><li>sfsdfsfdf< ><li>sfsdfsfdf< ></ul><div class=c></div><div class=bd style=margin-top:19px>sfsdfsfdf</div>请在ie下测试，仅仅将 margin-top:19px 改为margin-top:20px 你发现什么了？要素：doctype必须有，ie6、ie7下margin-top:19px还好好的，margin-top:20px 就出问题了，无法解释。
大家还可以将 clear 层换不同的位置测试。
解决方案：给ul 属性zoom:1 （给li 加zoom:1 没用）引申：clear层应该单独使用。
也许你为了节省代码把clear属性直接放到下面的一个内容层，这样有问题，不仅仅是ff和op下失去margin效果，ie下某些margin值也会失效<div style=”background:red;float:left;”>dd</div><div style=”clear:both;margin-top:18px;background:green”>ff</div>17.ie下overflow:hidden对其下的绝对层position:absolute或者相对层position:relative无效。
解决方案：给overflow:hidden加position:relative 或者position:absolute。
另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。
18.ie6下严重的bug，float元素如没定义宽度，内部如有div定义了height 或zoom:1，这个div就会占满一整行，即使你给了宽度。
float元素如果作为布局用或复杂的容器，都要给个宽度的。
19.ie6下的bug，绝对定位的div下包含相对定位的div，如果给内层相对定位的div高度height具体值，内层相对层将具有100%的width值，外层绝对层将被撑大。
解决方案给内层相对层float属性。
20.ie6下的bug，<head></head>内有<base target=”_blank”/>的情况下，position:relative层下的float层内文字无法选中。