而之所以要总结是因为偶尔在学习过程中，一些博客或书中会涉及到这些 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
四、 透明背景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 2 无序列表 3 无序列表 4 无序列表 5
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 2 有序列表 3 有序列表 4 有序列表 5 有序列表 6 有序列表 7
IE6，IE7 表现如下：
解决方法 ：
自己定义序号，不使用有序列表 ol 标签。
-------------------------------------------------------吃完栗子-------------------------------------------------------
3、IE6，IE7：如果一个列表项拥有 Layout 属性，当该 Layout 列表项元素跨行显示时，项目符号会显示为底部对齐，而不是按照一般的思维习惯顶部对齐。
-------------------------------------------------------举个栗子-------------------------------------------------------
HTML：
1 2 有序列表 3 有序列表 4 有序列表
有序列表
有序列表 5 有序列表 6 有序列表 7
IE6，IE7 表现如下：
这里也同时出现了重新计数的bug。
解决方法 ：
同上，自己定义序号，不使用有序列表 ol 标签。
----------------------- --------------------------------吃完栗子-------------------------------------------------------
4、再之，在 IE6 中，当列表项元素 li 中包含有块状显示的超链接元素时，列表元素之间的空格将不会被忽略，而会额外增加一行。
-------------------------------------------------------举个栗子-------------------------------------------------------
HTML：
1 2 有序列表中的链接 3 有序列表中的链接 4 有序列表中的链接 5 有序列表中的链接 6
IE6 中的表现如下：
IE7 表现正常：
解决方法 ：
只需要为定义了 display:block 的 a 标签元素触发 hasLayout 属性：
1 2 有序列表中的链接 3 有序列表中的链接 4 有序列表中的链接 5 有序列表中的链接 6
-------------------------------------------------------吃完栗子-------------------------------------------------------
5、 IE6 ：当设置了 position:relative 的包含块触发了 hasLayout 属性后，IE 浏览器才能够正常地进行定位。
-------------------------------------------------------举个栗子-------------------------------------------------------
HTML：
1 2 wrap34
查看更多关于IE6~IE7bugs_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did107915