【知识整理】本人整理ie6兼容问题的解决方法

了解ie历史的人都知道，前几天微软宣布停止对ie8、ie9、ie10进行版本更新及维护，这意味着浏览器厂商的规范又像w3c更近了一步，相信不久的将来广大前端工程师就不必再在考虑令人蛋疼的浏览器兼容性（尤其是坑爹的ie系列产品）问题了。但就现阶段来说大型网站仍然要考虑ie6及以上版本的兼容问题，本人接触了一些ie6的兼容性问题，在这里谈谈我对兼容ie6的经验，相关内容部分来自网络，经本人收集整理分享给大家，由于本人从事web前端开发行业不久，知识毕竟不足，欢迎大家批评指正，相互指点学习。

一。兼容ie6的准备工作：

想要兼容ie6你首先想要一款ie的测试工具，本人推荐IETester,该软件集了从ie5.5开始个版本ie的内核。方便广发web前端攻城狮进行ie兼容测试，同时IETester推荐了一款调试工具，DebugBar,只需要点击按钮下载安装即可。但IETester逼近不是原生的IE,有些表现与原生ie有一定差别，所以在IETester上测试兼容完成后，保险起见，在原生ie上需要再进行一遍测试！如果你的电脑不是xp系统，建议在虚拟机上安装带有ie6的xp系统，通过虚拟机进行原生ie测试确保无误！本人使用了VMWare虚拟机进行测试！到这里准备工作已经接近尾声，下面说一下常见的ie6的bug

二。ie6常见bug

1.给一个元素设定了浮动属性，最好给他设定宽高的值，否则有可能发生浮动错位。
2.ie6块级元素高度小于19px的时候需要写font-size=1px等解决，ie6不支持块级元素高度太小，会默认调大。
3.ie6块级元素里边很多a链接 ，如果出现莫名其妙的多了几个文字，而且文字还选不中，只要给a链接加相对定位一般就解决了
4.有的img这个标签在ie下需要应用display=block；这个属性
5.轮播图ie6  里边a里边img的的宽度的和和总宽度相同，ie会把最后一张图放到第二行，解决办法把总宽度设大一点；
6.双左边剧：用padding或者相对定位解决或者display：inline解决
7.ie6内部盒模型超出父级时，父级被撑大 解决方法：父标签使用overflow:hidden 或者父级相对定位，子级绝对定位
8.ie6li之间会有间距 解决方法：float: left;
9.ie6img于块元素中，底边多出空白 解决方法：父级设置overflow: hidden; 或 img { display: block; } 或 _margin: -5px; 
10.在IE6中，一些隐藏的元素（如注释、display:none;的元素）被包含在一个浮动元素里，就有可能引发文本重复bug。解决办法：给浮动元素添加display:inline;。
11IE下z-index的bug 在IE浏览器中，定位元素的z-index层级是相对于各自的父级容器，所以会导致z-index出现错误的表现。解决方法是给其父级元素定义  父级还得有定位属性z-index，有些情况下还需要定义

12. IE6/7 浮动元素换行 bug这里提供两个解决方案：

（一）：将span标签移到最前面，IE6/7立马变乖了，不换行了。但是这个方法在渲染顺序上有些改变（可能破坏语义），不是特别完美（还可以通过定位来实现，但是代码量增加不少，不推荐也不演示了）；
（二）:设置父元素的文本对齐方式为右对齐，然后将左边的a标签向左浮动，这样在不改变渲染顺序的同时又实现了我们想要的效果；
13.IE6下禁用滚动条（jquery代码）
$('html').css('overflow','hidden');
恢复滚动条
$('html').css('overflow','auto');
14.IE6链接失效，不能点击的问题解决方案
整改之前好几个人都改过的一个页面，发现在IE6下，有一个文字链接和一个图片链接均不能点击。图片链接更奇怪，从左边开始，大概三分之二部分是不能点击的，但是有三分之一是可以点击的，因此我觉得如果应该是可以解决的。于是在百度上搜索答案，答案有说在a:hover{zoom:1}，试验了一下，无效，结果是为链接加上：a{ position:relative;}相对定位，就可以正常点击了。具体原因我不清楚，但这应该又是一个常见的hack吧，同时也学习到一个知识点：如果你的a是需要绝对定位的，那么请在a外面套一个容器，把容器绝对定位{position:absolute;}，然后a依然是{position:relative;}，就可以在IE6下正常点击了。
15.表格单元格设置宽度不起作用的处理方法:给表格加上一个table-layout:fixed;属性

16.ie6不支持半透明及透明图片，推荐使用DD_belatedPNG.js，可以使ie6支持半透明及透明图片。

具体使用方法如下：

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
    DD_belatedPNG.fix('*');
</script>
<![endif]-->

*号会给所有元素都使用该方法，使用这种方法很方便，不需要逐个寻找需要使用该方法的元素，但有一个缺点，会导致部分链接不可用，解决方法上面已经介绍了。如只想给特定元素使用，代码如下
 DD_belatedPNG.fix('#d1,div,p,img,background');
注：其中img代表将所有指定元素的图片使用该方法，backgrouond表示将所有指定元素的背景使用该方法！