1、一、IE6IE7Firefox 浏览器不兼容原因及解决办法1.文字 本身的大小不兼容。同样是 font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie 下实际占高 16px，下留白 3px，ff 下实际占高 17px，上留白 1px，下留白 3px，opera 下就更不一样了。解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。这点很重要，在高度上我们不能容忍 1px 的差异。2.ff 下容器高度限定，即容器定义了 height之后，容器边框的外形就确定了，不会被内容撑大，而 ie下是会被内容撑大，高度限定失效。所以不要轻易
2、给容器定义 height。3.还讨论内容撑破容器问题，横向上的。如果 float 容器未定义宽度，ff 下内容会尽可能撑开容器宽度，ie 下则会优先考虑内容折行。 故，内容可能撑破的浮动容器需要定义 width。4.浮动 的清除，ff 下不清除浮动是不行的。5.double-margin bug。ie6 下给浮动容器定义 margin-left 或者 margin-right 实际效果是数值的 2倍。解决方案，给浮动容器定义 display:inline。6.mirrormargin bug，当外层元素内有 float元素时，外层元素如定义 margin-top:14px，将自动生成 marg
3、in-bottom:14px。padding 也会出现类似问题，都是 ie6下的特产，该类 bug 出现的情况较为复杂，远不只这一种出现条件，还没系统整理。解决方案：外层元素设定 border 或 设定 float。引申：ff 和 ie 下对容器的 margin-bottom，padding-bottom 的解释有时不一致，似乎与之相关。7.吞吃 现象，还是 ie6，上下两个 div，上面的 div设置背景，却发现下面没有设置背景的div 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。解决方案：使用 zoom:1。这个 zoom好象是专门为解决 ie6 bug而
4、生的。8.注释也能产生 bug“多出来的一只猪。 ”这是前人总结这个 bug使用的文案，ie6 的这个 bug 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案：用“ picRotate start ”方法写注释。9.img下的留白，大家看这段代码有啥问题：把 div的 border打开，你发现图片底部不是紧贴着容器底部的，是 img后面的空白字符造成，要消除必须这样写后面两个标签要紧挨着。ie7 下这个 bug 依然存在。解决方案：给 img设定 display:block。10.失去 line-height。文字，很遗憾，在 ie6下单行文字line-height
5、效果消失了。 。 。 ，原因是这个 inline-block元素和 inline元素写在一起了。解决方案：让 img 和文字都 float 起来。引申：大家知道 img 的 align 有 text-top，middle，absmiddle 啊什么的，你可以尝试去调整 img 和文字让他们在 ie和 ff下能一致，你会发现怎么调都不会让你满意。索性让 img 和文字都 f11.链接的 hover状态。a:hover imgwidth:300px 我们想让鼠标 hover时，链接里包含的图片宽度变化，可惜在 ie6下无效，ie7、ff 下有效。loat 起来，用 margin 调整。12.非链接
6、的 hover状态。div:hover 这样的样式 ie6是不认的，在 ie7、ff 下才有效果。13.block化的 a链接，其内套 absolute层，absolute 层内放置 img，ie 下，鼠标点击 img不会有链接效果，ff、op 下正常。14.无法彻底清除的 float。如果让 ul下的 li具有了 float属性，如何 clear浮动的 li呢？或者 class=”c” 或者class=”c” 或者 class=”c” 或者上述的组合？这个问题，我无法给出解答。下面有个例子与此相关.cclear:both;overflow:hidden;+overflow:visible.b
7、dborder:1px solid redul.exlist-style:none;ul.ex lifloat:left;border:1px solid green;sfsdfsfdfsfsdfsfdfsfsdfsfdf请在 ie下 测试，仅仅将 margin-top:19px 改为 margin-top:20px 你发现什么了？要素：doctype必须有，ie6、ie7 下 margin-top:19px还好好的，margin-top:20px 就出问题了，无法解释。 。大家还可以将 clear 层换不同的位置测试。解决方案：给 ul 属性 zoom:1 （给 li 加 zoom:1 没用
8、）引申：clear 层应该单独使用。也许你为了节省代码把 clear属性直接放到下面的一个内容层，这样有问题，不仅仅是ff和 op下失去 margin效果，ie 下某些 margin值也会失效ddff15.ie下 overflow:hidden对其下的绝对层 position:absolute或者相对层position:relative无效。解决方案：给 overflow:hidden加 position:relative或者 position:absolute。另，ie6 支持overflow-x或者 overflow-y的特性，ie7、ff 不支持。16.ie6下严重的 bug，float
9、 元素如没定义宽度，内部如有 div定义了 height或 zoom:1，这个 div就会占满一整行，即使你给了宽度。float 元素如果作为布局用或复杂的容器，都要给个宽度的。17.ie6下的 bug，绝对定位的 div下包含相对定位的 div，如果给内层相对定位的 div高度height具体值，内层相对层将具有 100%的 width值，外层绝对层将被撑大。解决方案给内层相对层 float属性。18.ie6下的 bug，内有的情况下，position:relative层下的 float层内文字无法选中。这个 bug迫使我修公用样式库。19.ff的缺点。width:100%这个东西在 ie里
10、用很方便，会向上逐层搜索 width值，忽视浮动层的影响，ff 下搜索至浮动层结束，如此，只能给中间的所有浮动层加 width:100%才行二、用 css hack解决 IE5 IE5.5 IE6 Firefox浏览器兼容性1. 区别 FF和 IE1-1首先，当然是!important 大法，可以提升指定样式规则的应用优先权，如下面的例子：插入代码：divbackground-color: red !important;background-color: blue;因为!important 声明在 IE6中并不是绝对的，它会被之后的同名属性定义所替换。也就是说在上面的例子中，IE6 所应用的是
11、最后一个背景色的值，即“blue” ；而在 FF中背景色的值为“red” 。1-2还有一种方法，就是 IE浏览器可以识别“”等一些符号，如“” 、 “”、 “插入代码：divbackground-color: red;background-color: blue;在 FF中得到的是背景色红色，而在 IE中得到的背景色是蓝色，根据样式重定义的规则，如果浏览器可以识别“” ，则应该得到的蓝色的背景，因此可以知道“”只有 IE可以识别。这样，我们就可以把 FF和 IE的样式分离开。下面就是解决 IE自己的问题了。2. 完整的 Hack这样我们就可以为不同的浏览器定义不同的样式了。来看个完整的例子：插
12、入代码：divwidth: 500px;height: 50px;background-color: red !important;/*FF*/background-color: blue;/*IE5*/text-align:center;div/*IE5.5+*/*IE only*/background-color: black;/*IE6*/*IE only*/background-color /*IE5.5*/: green;需要注意的是，在上面例子中“background-color”定义的顺利不能改变，即 FF-IE5-IE6-IE5.5。对于 IE的定义在属性前要加“” ，因为“d
13、iv/*/”这个 HACK在 FF中可以识别。鼠标手形:(兼容 IE FF) hand等同于 pointer，而后者可以兼容 IE和 FF。三、1、float 的 div一定要闭合。例如：(其中 floatA、floatB 的属性已经设置为 float:left;)这里的 NOTfloatC并不希望继续平移，而是希望往下排。这段代码在 IE中毫无问题，问题出在 FF。原因是 NOTfloatC并非 float标签，必须将float标签闭合。在之间加上这个 div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有 float属性的 div同级，之间不能存在嵌套关系，否则会产生异常。并
14、且将 clear这种样式定义为为如下即可：.clearclear:both;此外，为了让高度能自动适应，要在 wrapper里面加上 overflow:hidden;当包含 float的 box的时候，高度自动适应在 IE下无效，这时候应该触发 IE的layout私有属性 用 zoom:1;可以做到，这样就达到了兼容例如某一个 wrapper如下定义：.colwrapperoverflow:hidden;zoom:1;margin:5px auto;2、margin 加倍的问题。设置为 float的 div在 ie下设置的 margin会加倍。这是一个 ie6都存在的 bug。解决方案是在这个
15、 div里面加上 display:inline;例如：相应的 css为#IamFloatfloat:left;margin:5px;/*IE下理解为 10px*/display:inline;/*IE下再理解为 5px*/3、关于容器的包涵关系很多时候，尤其是容器内有平行布局，例如两、三个 float的 div时，宽度很容易出现问题。在 IE中，外层的宽度会被内层更宽的 div挤破。一定要用 Photoshop或者 Firework量取像素级的精度。4、关于高度的问题如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。5、最狠的手段 - !impor
16、tant;如果实在没有办法解决一些细节问题,可以用这个方法.FF 对于”!important”会自动优先解析,然而 IE则会忽略.如下.tabd1background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */值得注意的是，一定要将 xxxx !important 这句放置在另一句之上，上面已经提过常见兼容问题：1.DOCTYPE 影响
17、 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 的垂直居
18、中问题: 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中的
19、 BOX模型解释不一致导致相差 2px解决方法：divmargin:30px!important;margin:28px;注意这两个 margin的顺序一定不能写反，据阿捷的说法!important 这个属性 IE不能识别，但别的浏览器可以识别。所以在 IE下其实解释成这样：divmaring:30px;margin:28px重复定义的话按照最后一个来执行，所以不可以只写 margin:XXpx!important;10.IE5 和 IE6的 BOX解释不一致IE5 下divwidth:300px;margin:0 10px 0 10px;div 的宽度会被解释为 300px-10px(右填充
20、)-10px(左填充)最终 div的宽度为 280px，而在 IE6和其他浏览器上宽度则是以 300px+10px(右填充)+10px(左填充)=320px 来计算的。这时我们可以做如下修改divwidth:300px!important;width /*/:340px;margin:0 10px 0 10px关于这个/*/是什么我也不太明白，只知道 IE5和 firefox都支持但 IE6不支持，如果有人理解的话，请告诉我一声，谢了！：）11.ul 标签在 Mozilla中默认是有 padding值的,而在 IE中只有 margin有值所以先定义 ulmargin:0;padding:0;就
21、能解决大部分问题注意事项：1、float 的 div一定要闭合。例如：(其中 floatA、floatB 的属性已经设置为 float:left;)这里的 NOTfloatC并不希望继续平移，而是希望往下排。这段代码在 IE中毫无问题，问题出在 FF。原因是 NOTfloatC并非 float标签，必须将float标签闭合。在之间加上这个 div一定要注意声明位置，一定要放在最恰当的地方，而且必须与两个具有 float属性的 div同级，之间不能存在嵌套关系，否则会产生异常。并且将 clear这种样式定义为如下即可：.clearclear:both;此外，为了让高度能自动适应，要在 wrapp
22、er里面加上 overflow:hidden;当包含 float的 box的时候，高度自动适应在 IE下无效，这时候应该触发 IE的layout私有属性(万恶的 IE啊!)用 zoom:1;可以做到，这样就达到了兼容。例如某一个 wrapper如下定义：.colwrapperoverflow:hidden;zoom:1;margin:5px auto;2、margin 加倍的问题。设置为 float的 div在 ie下设置的 margin会加倍。这是一个 ie6都存在的 bug。解决方案是在这个 div里面加上 display:inline;例如：相应的 css为#IamFloatfloat:
23、left;margin:5px;/*IE 下理解为 10px*/display:inline;/*IE 下再理解为 5px*/3、关于容器的包涵关系很多时候，尤其是容器内有平行布局，例如两、三个 float的 div时，宽度很容易出现问题。在 IE中，外层的宽度会被内层更宽的 div挤破。一定要用 Photoshop或者 Firework量取像素级的精度。4、关于高度的问题如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。(似乎有时候不会自动往下撑开，不知道具体怎么回事)5、最狠的手段 - !important;如果实在没有办法解决一些细节问题,可
24、以用这个方法.FF 对于”!important”会自动优先解析,然而 IE则会忽略.如下.tabd1background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */值得注意的是，一定要将 xxxx !important 这句放置在另一句之上，上面已经提过;IE7.0 出来了，对 CSS的支持又有新问题。浏览器多了，网页兼容性更差了，疲于
25、奔命的还是我们 ，为解决 IE7.0的兼容问题，找来了下面这篇文章：现在写一个 CSS可以这样：#example color: #333; /* Moz */* html #example color: #666; /* IE6 */*+html #example color: #999; /* IE7 */那么在 firefox下字体颜色显示为#333，IE6 下字体颜色显示为#666，IE7 下字体颜色显示为#999，他们都互不干扰。五、margin 加倍的问题。设置为 float的 div在 ie下设置的 margin会加倍。这是一个 ie6都存在的 bug。解决方案：是在这个 div里
26、面加上 display:inline;例如：相应的 css为以下为引用的内容：#IamFloatfloat:left;margin:5px;/*IE下理解为 10px*/display:inline;/*IE下再理解为 5px*/六、1.最简单的鼠标移过手变型的 css要改了 cursor:pointer;/*ff 不支持 cursor:hand*/ dw8下面自动出来的也没有 hand这个属性了，标准的是 pointer2.ff不支持滤镜 最常见的半透明不支持。filter: Alpha(Opacity=50); /* for IE */opacity: .5;/* for Firefox
27、*/style=“-moz-opacity:0.5; filter:alpha(opacity=50);cursor:hand;“ onmouseover=“this.style.MozOpacity=1;this.filters.alpha.opacity=100“ onmouseout=“this.style.MozOpacity=0.5;this.filters.alpha.opacity=50“3.ff不支持 expression 例如去掉链接的边框要分别写不同的 cssa,area blr:expression(this.onFocus=this.blur() /* for IE *
28、/:focus outline: none; /* for Firefox */4.ff不支持 div滚动条的颜色设置，目前还没有找到替换的好方法。.contendiv position: absolute; left: 0px; top: 10px; width: 580px;height: 135px;line-height:120%;text-align:left; font-family:“宋体“;word-break : break-all; color:#6D6E71;OVERFLOW-Y:auto;OVERFLOW-X:no;SCROLLBAR-ARROW-COLOR: red;
29、 SCROLLBAR-TRACK-COLOR:F6F6F6;SCROLLBAR-FACE-COLOR:#F6F6F6;SCROLLBAR-SHADOW-COLOR:#F6F6F6;SCROLLBAR-DARKSHADOW-COLOR:#F6F6F6;SCROLLBAR-3DLIGHT-COLOR:#F6F6F6;SCROLLBAR-HIGHLIGHT-COLOR:#F6F6F6;这个在 ff里面完全没有效果了。5.ie下面显示在文字下面横线的 border-width: 0px 0px 1px 0px;在 ff里面跑到文字上面去了。原来是 ff的容错能力太差了，是下面的 width: 186p
30、x;height: 0px;宽高 引起的，其实 a:haver已经继承了上级的属性了，只要定义不同的样式就可以了，看来 ff有助于制作标准化，简洁化的网页，对 css的理解也更深刻，对提供 css来说是个很好的帮助.onelinksdiv a:hover display: block;border-style: solid;color: #ff0000;border-width: 0px 0px 1px 0px;/*display: block;border-style: solid; border-width: 0px 0px 1px 0px;width: 186px;height: 0px
31、; color: #ff0000; font-size: 14px;text-align: right;*/下面的写法在 ie下面正常，但在 ff下是错误的.onelinksdiv a:hover display: block;border: #ff0000 solid; border-width: 0px 0px 1px 0px;width: 186px;height: 0px; color: #ff0000; font-size: 14px;text-align: right;相关参考资料：border-width:border-top-width border-right-width b
32、order-bottom-width border-left-width;p#fourbordersborder-width:thick medium thin 12px;如果定义四个值,那么这四个值就分别是上,右,下,左边框的宽度值(从上边框开始,以逆时针的顺序遍历).等价于下面的定义p#fourbordersborder-top-width:thick;border-right-width:medium;border-bottom-width:thin;border-left-width:12px;6.ff不支持 scroll 属性，必须定义 overflow:hidden;而且要在 ht
33、ml标签下，不能在 body下htmloverflow:hidden;7.ff不支持数据岛绑定在 ie下可以加载进数据，但到了火狐就加载不进数据了，开始以为可能是因为内容行文字太多导致不能断行不能加载，但删除只剩几个字以后一样不行。8.style=“word-break:break-all“在网页中的单元格里的内容超出一行时,在 ie浏览器里定义的换行样式能够正常使用,但在 firefox里却不能被支持了.style=“word-break:break-all“ 是 MS扩展的 IE专有属性，并未成为 W3C标准，因而Firefox 还不能支持它。不过 MS已经将其提交到了 W3C，而在 W3
34、C的 CSS3的候选方案中也能看到它。希望这个属性在被 W3C最终定案的为 CSS3标准后，Firefox 可以支持吧。这之前，可以试试style=“table-layout:fixed;word-wrap: break-word“ （当它是英文的时候就不能正常换行了）9.目前 FF2.0为止都不支持 IE的 name锚点像这种写法都是不支持的：go back原来根据 W3C的语法，标签始终都会查找 href地址并跳转过去，现在 onclick事件与#这个地址又有冲突。为了让 Firefox与 IE部分元素属性兼容，那个费劲，我无意中发现 Firefox对空格敏感：/有空格，锚点作用/无空格，
35、锚点无作用锚点的写法又十分讲究，比如，Firefox 不支持锚点，得加上 id=#1静态同页面引用时必须这样写：，就不行，动态页面要用 JS后遗症来了，考虑到鼠标样式和浏览器兼容又开始折腾：/不兼容/不兼容/没有.,属于脚本的非法书写/没照顾到自定义系统鼠标样式的用户/状态栏会显现，href 有多长显示多长/我用的10.ff火狐下面不支持 document.all属性的，必需用 document.getElementById(idName);以下是我的动画切换效果，在 ie下正常，到了火狐里面就不动了，修改后可以切换图片但渐隐渐现的效果就没有了。原因是火狐不支持滤镜 filter,只好用半透明
36、的 div来实现了。/*company page*/function playcompanyimg()window.setInterval(changecompanyimg();, interval);function changecompanyimg()/*火狐下面不支持 document.all属性的，必需用 document.getElementById(idName);*/if (document.all)/*以下两句是在切换效果前切换背景图片的代码，number、image 和 idtemp要设置全局变量才可以*/number = Math.floor(Math.random() *
37、 image.length);idtemp.src=imagenumber;/alert(number+“ ii “+idtemp.src)/*以下两句是实现幻灯片切换效果的*/alert(do_transition);/panyimg.style.filter=“progid:DXImageTransform.Microsoft.Fade(duration=2,overlap=0.4)“;/*panyimg.style.filter=“progid:DXImageTransform.Microsoft.Fade(duration=1,overlap=1)“;panyimg.filters0.
38、Apply();panyimg.filters0.Play();*/var companyimgidtmep = document.getElementById(companyimg);companyimgidtmep.style.filter=“progid:DXImageTransform.Microsoft.Fade(duration=1,overlap=1)“;companyimgidtmep.filters0.Apply();companyimgidtmep.filters0.Play();/参考资料：核心：FILTER:revealTrans(duration=1,transiti
39、on=23); 一个 IE滤镜， 在其它的非 IE浏览器虽然不支持这个滤镜，但是支持透明滤镜的，你可以分一下，IE 下继续使用你这个效果，而在非 IE浏览器下用透明滤镜：style.opacityopacity = 0.5 CSS3style.MozOpacity-moz-opacity: 0.5 Mozilla 里等同上面这个滤镜 这个滤镜也适用于 Netscapestyle.KHTMLOpacity-khtml-opacity: 0.5 Safari 里的透明滤镜。11.ff中 div定位不能通过 js初始化 必须先设定值并且要设定度量单位 top:80px;left:212px;12.f
40、f不能用.click();方法打开链接hello hello2hello3触发事件放在href=“javascript:onclick=test2(1)“ 里面 ff无效hello3 0) return “MSIE“;if(isFirefox=navigator.userAgent.indexOf(“Firefox“)0)return “Firefox“;if(isSafari=navigator.userAgent.indexOf(“Safari“)0) return “Safari“;if(isCamino=navigator.userAgent.indexOf(“Camino“)0)re
41、turn “Camino“;if(isMozilla=navigator.userAgent.indexOf(“Gecko/“)0)return “Gecko“;/ 13.OVERFLOW-Y:auto;OVERFLOW-X:hidden;在 ie里面可以用 no表示隐藏，但在 ff里面必须用 hiddenIE6下靠边浮动的元素的 margin加倍的问题最左边的一个 float:left;明明是 margin-left:5px;却多出来了 5px- 解决答案 -这是 ie6中一个十分经典的 Bug，即：靠边浮动的元素的 margin加倍。这时只要将此元素（背景色为红色的元素）的 display
42、属性改为 inline。修改后的代码：七、CSS 技巧1.div的垂直居中问题vertical-align:middle; 将行距增加到和整个 DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 2. margin加倍的问题设置为 float的 div在 ie下设置的 margin会加倍。这是一个 ie6都存在的 bug。解决方案是在这个 div里面加上 display:inline; 例如： 相应的 css为 #IamFloat float:left; margin:5px;/*IE下理解为 10px*/ display:inline;/
43、*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
44、:table; 4 IE与宽度和高度的问题IE 不认得 min-这个定义，但实际上它把正常的 width和 height当作有 min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用 min-width和 min-height的话，IE 下面根本等于没有设置宽度和高度。 比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样： #box width: 80px; height: 35px;htmlbody #box width: auto; height: auto; min-width: 80px; min-height:35px; 5.页
45、面的最小宽度min -width是个非常方便的 CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但 IE不认得这个，而它实际上把 width当做最小宽度来使。为了让这一命令在 IE上也能用，可以把一个 放到 标签下，然后为 div指定一个类, 然后 CSS这样设计： #container min-width: 600px; width:expression(document.body.clientWidth 7.IE捉迷藏的问题 当 div应用复杂的时候每个栏中又有一些链接，DIV 等这个时候容易发生捉迷藏的问题。 有些内容显示不出来，当鼠标选择这个区域是发现内容确
46、实在页面。解决办法：对#layout 使用 line-height属性 或者给#layout 使用固定高和宽。页面结构尽量简单。 8.float的 div闭合;清除浮动;自适应高度; 例如：这里的 NOTfloatC并不希望继续平移，而是希望往下排。(其中 floatA、floatB 的属性已经设置为 float:left;) 这段代码在 IE中毫无问题，问题出在 FF。原因是 NOTfloatC并非 float标签，必须将float标签闭合。在 之间加上 这个div一定要注意位置，而且必须与两个具有 float属性的 div同级，之间不能存在嵌套关系，否则会产生异常。 并且将clear这种样
47、式定义为为如下即可： .clear clear:both; 作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应，要在 wrapper里面加上 overflow:hidden; 当包含 float的 box的时候，高度自动适应在 IE下无效，这时候应该触发 IE的 layout私有属性(万恶的 IE啊！)用 zoom:1;可以做到，这样就达到了兼容。 例如某一个 wrapper如下定义： .colwrapper overflow:hidden; zoom:1; margin:5px auto; 对于排版,我们用得最多的 css描述可能就是 float:left.有的时候我们
48、需要在 n栏的float div后面做一个统一的背景,譬如: 比如我们要将 page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着 left center right的向下拉长,而 page居然保存高度不变,问题来了,原因在于 page不是 float属性,而我们的 page由于要居中,不能设置成 float,所以我们应该这样解决 再嵌入一个 float left而宽度是 100%的 DIV解决之 万能 float 闭合(非常重要!) 关于 clear float 的原理可参见 How To Clear Floats Without Structural Marku
49、p,将以下代码加入 Global CSS 中,给需要闭合的 div加上 class=“clearfix“ 即可,屡试不爽. /* 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 */ 或者这样设置：.hackbox di
