汇总 IE 在 CSS 中常见的 中 bug

从今天开始，我就在为新主题布局了，我认为布局相当的重要，就像造楼打地基一样，在写 HTML 的时候就要兼顾到美观、SEO、还有在各浏览器下的兼容性，其中最难的就要属兼容性了，我又不想用 Kill ie6 简单地忽视之，虽然我打心底里想把 ie6 kill 掉，昨天又刚好看到盘先海总结了一些 IE 下常见的 bug，以后写主题的时候估计会用到，先收藏转载一下。

1.IE 6 下不支持透明的 PNG 图片的解决方案

DD_belatedPNG，支持 backgrond-position 与 background-repeat.，同时 DD_belatedPNG 还支持 a:hover 属性，以及<img>，不仅支持 png 作为图片，也支持标签插入的 png 图片，你可以查看目前发现的一些问题。同时，这里也有一份中文的说明。

2.IE 6 背景闪烁问题

如果你给链接、按钮用CSS sprites作为背景，你可能会发现在IE6下会有背景图闪烁的现象。造成这个的原因是由于 IE6 没有将背景图缓存，每次触发hover的时候都会重新加载，可以用 JavaScript 设置 IE6 缓存这些图片：

document.execCommand("BackgroundImageCache",false,true);

如果 a 和 a:hover 使用的不同的背景图片，将图片合成在一起，css 中通过 background-postion 控制其位置，页面中加入从缓存读取背景图片的 javascript 脚本。

3. IE 6 双空白边浮动 bug

当你为一个浮动元素赋予一个 margin 值，IE 6 下这个 margin 值会被双倍计算。解决办法：添加 display:inline;

4. IE 6 3像素文本偏移 bug

假设将-个元素向左浮动，并且不希望相邻段落中的文本围绕浮动元素。你可能会在段落上应用一个左空白边，其宽度等于浮动元素的宽度:

.float { float: left; width: 100px; }
p { margin-left: 100px; }

如果这么做，IE 6 在文本和浮动元素之间就会出现一个莫名其妙的3像素间隙。解决办法：

* html p { height: 1%; margin-left: 0; }
* html .Float { margin: 0; }

5.IE 6 躲躲猫 bug

出现这个 bug 的条件是：一个浮动元素后面跟着一些非浮动元素，然后是一个清理元素，所有这些元素都包含在一个设置了背景颜色或图像的父元素中。如果清理元素碰到了浮动元素，那么中间的非浮动元素看起来消失了，隐藏到了父元素的背景颜色或图像后面，只有在刷新页面时才重新出现。

解决办法：让包含它们的元素具有hasLayout属性：* html .box { height: 1%; }

我知道 IE 的 bug 肯定不只这些，现在向广大博友征集 IE 其他的 bug，最好是提供解决方案，本文会同步更新，谢谢各位啦～

本文转自：http://www.panxianhai.com/ie-bugs.html