Leakon勤奋 - 创新 - 锲而不舍

上一篇日志中写了 IE6 对 float 元素显示不正常的问题，现在找到了一个解决办法。

测试了很多次，发现跟 margin 和 padding 没有直接的关系，本质的问题根源在于，包含 float 元素的外层 div，没有设置足够的宽度和高度，也就是说，这个容器没有足够的空间用来显示内部所有的 float 元素。

margin 和 padding 只是一个间接原因，如果没有内外边距，可能外层 div 刚好可以容纳内部的 float。

加上边距后，每个 float 占用的空间就变大了，首先带来的问题是 div 的宽度不够，那么，愚蠢的 IE6 就会产生莫名其妙的问题，反映给用户的现象就是出现鬼影。

解决方案：准确计算内部 float 元素加在一起占用的宽高，确保外层 div 在 css 中明确指定了具体的 width 和 height 像素值，问题不会再出现。

可悲啊，95% 以上的桌面浏览器被这样愚蠢、垃圾的 IE6 霸占着！！！

IE6 浏览器对 float 属性的元素显示不太正常，经常遇到的情况是，打开页面，发现某个区域的内容是空的，什么都不显示，但鼠标移动到那个区域，或者附近的一些区域时，那个空的区域立刻显示出原有的内容。

另一个 case 可以称之为“鬼影”，现象是，某串文字，会在 2 个位置同时显示，如果有 hightlight 效果，那么任凭你把光标放到二者任意一个上面，另一串文字也会立刻高亮。

以前对这个问题很抓狂，也没有总结出一个很好的解决方法。

今天又碰到类似的问题，查了一下 Google，有人给出一个结论，当某个元素有 float 属性时，再给他添加 padding 或 margin 等属性，在 IE6 下可能会出现显示问题。

具体的解决方法我总结一下会发布到 Blog 上。

这篇文字算是一个 bug 记录吧。