本来想写一篇关于 IE bugs 的总结的，但是发现 IE 的 bugs 一般都存在IE5，IE6，IE7上，这都是很古老的浏览器。而且这些 bugs 测试起来相当麻烦，IEtester和 IE10 自带的文档模式选择都有一些偏差，要在虚拟机上安装系统测试才是最为准确的，最最重要的原因是现在的网页开发IE5 基本是不考虑了，IE6，IE7 也快完全退出历史舞台了，一般网站会通过检测浏览器版本并提示用户升级浏览器，所以这些 bugs 在现在的开发中遇到的几率是很低的。
而之所以要总结是因为偶尔在学习过程中，一些博客或书中会涉及到这些 bugs，甚至在一些公司的笔试中喜欢挑出这些来考考你对 CSS 的了解是否够深入。所以我还是本着前人栽树后人乘凉的原则去网上找一些好的资源学习好了。寻寻觅觅终于在W3C Plus上找到站长大漠的浏览器兼容之旅，总共四篇，总结得比较系统，可读性比较强，就以此为主要的资源学习吧。链接如下：浏览器兼容之旅的第一站:如何创建条件样式浏览器兼容之旅的第二站:各浏览器的Hack写法（更全面的可以参考葵中剑 的CSS Hack Table）浏览器兼容之旅的第三站:IE常见Bug——part1目录结构：十种经典的Bug产生的原因一、浮动元素的双倍Margin的Bug二、克服Box Model的Bug三、设置元素的最小高度和最小宽度四、块元素水平居中五、列表li的楼梯Bug六、li空白间距七、IE6下无法设置元素的微高八、overflow:auto与position:relative的碰撞九、浮动层错位十、IE6下躲猫猫浏览器兼容之旅的第四站:IE常见Bug——part2目录结构：IE的Bug处理一、IE6克隆文本的Bug二、ＩＥ下图片缩放Bu三、IE6下PNG图片透明Bug四、<IFrame>透明背景Bug五、禁用IE浏览器默认的垂直滚动条六、IE6下:hover伪类Bug七、修复min-width/max-width和max-heigt/min-height的Bug八、修复position:relative的Bug九、修复margin的负值十、修复overflow的问题不过，文章中有的地方不是很准确，有些细节描述也不够清晰，所以下面做一些订正和补充：1）第一站IE10和IE11已经不支持条件注释了，具体可以参考IE的官方说明：不再支持条件注释，除了条件注释，IE很多传统支持的功能的更改：传统功能支持更改2）第三站IE6及更低版本不认识min-height，但是 height 属性在IE6及以下版本是解析成 min-height 的效果，故设置元素的最小高度时可以为IE6-专门hack，即写成：1 min-height：100px；2 _height：100px；/*兼容IE6-*/3）bugs的补充1、IE6，IE7：ul 元素有了 Layout 属性后，项目符号就会不见。-------------------------------------------------------举个栗子-------------------------------------------------------HTML：
1 <ul>2 <li>无序列表</li>3 <li>无序列表</li>4 <li>无序列表</li>5 </ul>CSS：
1 ul{2 zoom:1;3 }IE6，IE7 表现如下：
正常表现应该如下：
解决方法：为ul添加 padding-left:1em;1 ul{2 zoom:1;3 padding-left: 1em;4 }则表现正常。-------------------------------------------------------吃完栗子-------------------------------------------------------2、IE6，IE7：有序列表中，任何具有 Layout 特性的列表项元素都会拥有独立的计数器。-------------------------------------------------------举个栗子-------------------------------------------------------HTML：1 <ol>2 <li>有序列表</li>3 <li>有序列表</li>4 <li style="zoom:1;">有序列表</li>5 <li>有序列表</li>6 <li>有序列表</li>7 </ol>IE6，IE7 表现如下：
解决方法：自己定义序号，不使用有序列表 ol 标签。
-------------------------------------------------------吃完栗子-------------------------------------------------------3、IE6，IE7：如果一个列表项拥有 Layout 属性，当该 Layout 列表项元素跨行显示时，项目符号会显示为底部对齐，而不是按照一般的思维习惯顶部对齐。-------------------------------------------------------举个栗子-------------------------------------------------------HTML：1 <ol>2 <li>有序列表</li>3 <li>有序列表</li>4 <li style="zoom:1;">有序列表<br>有序列表<br>有序列表</li>5 <li>有序列表</li>6 <li>有序列表</li>7 </ol>IE6，IE7 表现如下：
这里也同时出现了重新计数的bug。解决方法：同上，自己定义序号，不使用有序列表 ol 标签。
-------------------------------------------------------吃完栗子-------------------------------------------------------4、再之，在IE6中，当列表项元素 li 中包含有块状显示的超链接元素时，列表元素之间的空格将不会被忽略，而会额外增加一行。-------------------------------------------------------举个栗子-------------------------------------------------------HTML：1 <ol>2 <li><a href="#">有序列表中的链接</a></li>3 <li><a href="#">有序列表中的链接</a></li>4 <li><a style="display:block;" href="#">有序列表中的链接</a></li>5 <li><a href="#">有序列表中的链接</a></li>6 </ol>IE6 中的表现如下：
IE7 表现正常：
解决方法：只需要为定义了 display:block 的 a 标签元素触发 hasLayout 属性：1 <ol>2 <li><a href="#">有序列表中的链接</a></li>3 <li><a href="#">有序列表中的链接</a></li>4 <li><a style="display:block;zoom:1;" href="#">有序列表中的链接</a></li>5 <li><a href="#">有序列表中的链接</a></li>6 </ol>-------------------------------------------------------吃完栗子-------------------------------------------------------5、IE6：当设置了 position:relative 的包含块触发了 hasLayout 属性后，IE 浏览器才能够正常地进行定位。-------------------------------------------------------举个栗子-------------------------------------------------------HTML：
1 <span class="wrap">2 wrap3 <div class="box">4 </div>5 </span>CSS：
1 .wrap { 2 margin: 100px; 3 position: relative; 4 border: 1px solid #aaa; 5 } 6 .box { 7 position: absolute; 8 left: 100px; 9 top: 100px;10 width: 100px;11 height: 100px;12 background: #ccc;13 }IE6 表现如下：
正常表现如下：
解决方法，说实话遇到这种情况的机会实在不多，因为需要一个行内元素包围一个块级元素，从结构上就是不合理的，但是为了说明清楚 IE6 的bugs，这里还是说一下解决的方法，就是触发父元素的 hasLayout 属性，即添加 _zoom:1，兼容 IE6：1 .wrap {2 margin: 100px;3 position: relative;4 border: 1px solid #aaa;5 _zoom:1;6 }但其实这种 hack 并不推荐，IE6 的表现并不和标准浏览器一致，行内元素表现出了块级元素的特点，上下的 margin 值变得有效了：
-------------------------------------------------------吃完栗子-------------------------------------------------------6、IE6:hover 的bug直接上例子-------------------------------------------------------举个栗子-------------------------------------------------------HTML：1 <a href="#">菜单项目<img src="i.png"></a>CSS：
1 a{ 2 text-decoration: none; 3 } 4 a img{ 5 display: none; 6 border:none; 7 } 8 a:hover img{ 9 display: inline;10 }标准浏览器下，当鼠标在链接上时，图片会显现，但是IE6没有效果：
新闻热点
疑难解答
