在浏览器的兼容性问题里，有的对页面影响不大，比如，A 字体的颜色啊，等等。但是，有些影响就比较大了，比如布局的差异。在IE中好好的，到了Firefox/Chrome和Safari中却一塌糊涂。其中，布局问题中比较难调试的，就数浮动引起的问题了。
另外，从对盒子模型(box model)的了解中我们知道，每个元素都会形成几个框，框的大小尺寸等会对页面的布局产生决定性的影响。元素的框，由高和宽围成了一个拥有面积的区域，我们也应该知道，如果没有面积，就称不上是区域，只能叫做线。有没有想过这种情况，一个元素的高是0，宽不是0，那么，它的面积是0，在页面中，可以算作是不存在的元素，因为它不占据空间，不应该影响其他框的布局。实际情况是这样吗？
我们知道，浮动框会缩短当前行框的宽度，会影响后续浮动元素的定位。我们就从这两点出发，去探求一下这个问题。
0高度的浮动元素会缩短行框吗？
看这个例子：
- HTML code
<div style="width:400px; overflow:hidden; border:1px solid red; font-size:30px;"> <div id="float" style="float:left; width:100px; background:green;"> <div></div> </div> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</div>
在各个浏览器中测试一遍，截图：
可见，在IE6/IE7/IE8(Q)中，行框被缩短，行内框的定位被影响。而其他浏览器中，则认为它不存在。通过 IE 的 debug 工具查看后发现，浮动元素的高度确实是0。
0高度的浮动元素会否影响其他浮动元素呢？
将例子修改一下，把文本换成一个浮动元素。
例子代码：
- HTML code
<div style="width:400px; overflow:hidden; border:1px solid red;"> <div id="float" style="float:left; width:100px; background:green;"> <div></div> </div> <div id="float2" style="float:left; width:100px; height:100px; background:blue;"></div></div>
可见，IE6/IE7/IE8(Q)中的高度为0的浮动元素确实还占据空间。
呃，，很奇怪对不对，难道是hasLayout在作怪吗？到底怎么回事呢？不得而知。
望哪位大侠指教！！
更多兼容性问题：
【分享】浏览器兼容性问题目录
------解决方案--------------------------------------------------------
什么什么
------解决方案--------------------------------------------------------
这个问题没有研究过。
------解决方案--------------------------------------------------------
------解决方案--------------------------------------------------------
这个问题没有研究过。
------解决方案--------------------------------------------------------
不懂啊 啊 啊
------解决方案--------------------------------------------------------
学习了, 这网不错
------解决方案--------------------------------------------------------
瞄了一下，看看别人的新思想！
------解决方案--------------------------------------------------------
好东西啊！支持lz