IE6中常见兼容性问题及浏览器显示难题

1.双倍边距Bug

问题描述：假如有一个ul,里面有若干li,当li设置为左浮动时，此时设置li的margin-left为10px，会在最左侧呈现双倍情况。即20px

正常显示：

IE6显示：

修正方法：给整个li这个集合加上 display:inline

2.3像素问题

问题描述：比如有两个div，前一个蓝色，后一个绿色，前一个设置了float:left，后面那个没有浮动，此时两个div并不重叠，而是并排并且二者中间相隔3px。

正常显示：

IE6显示：

修正方法：用position:absolute; left:-(X+3)px; 解决，其他情况出现3像素的时候，用浮动div的margin-left:-3px找补。

3.当子元素高度未知，并且给丫设置了浮动，怎么让父元素适应子元素高度？

例子：我用一个固定宽度且有1px黑框的div包一个未知高度的<p>标签，p标签设置浮动，父级不经处理情况下显示：

解决方式：给父容器加上 overflow:auto;就可以让黑框包着p标签。IE6下也可行。

4.IE6臭名昭著的png蓝底问题

问题描述：在IE7+及其他非IE浏览器中，png图像是一种高分辨率的透明图片，解决了gif粗糙的分辨率问题，但是IE6却让png不透明，后面糊上了个难看的淡蓝色底子

解决方式：{filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/alert_fax.png);background:none;}用滤镜，加黑部分不要漏。这样就能解决了。

5.CSS sprites技术下IE6小图标闪烁

问题原因：因为IE6没有缓存，所以需要重新加载图像。

解决方式：用JS给丫设图片缓存，代码：document.execCommand("BackgroundImageCache",false,true);

6.IE6不支持min-height问题

问题原因：IE6不支持min-height属性，它只认height，也就说IE6没有最小高度这个概念。例如：我设置一黑框div包着一个不定高度的p标签，我设div的min-height:100px;当p高度变小时div只会缩到100px为止。

正常：

IE6下：

解决方法：使用其他浏览器支持的！important后缀缀上height:auto，然后给IE6设置固定height，这样其他浏览器只会渲染height:auto。可如果给IE6固定高度，那么它就失去了高度自适应这一优点。用JS？

PS:这还适用于最大高度，最小宽度，最大宽度。

7.IE6操蛋的绝对定位配合浏览器尺寸问题

问题描述：在IE6下，如果给body居中了，而且这个body中有一个position:absolute;的div。当浏览器改变时（绿框body，黑框div）

正常：div跟着body走，还是在body的左上角。

IE6下：div错过了body

解决方式：给body加上position:relative;

8.IE6不支持PNG图像解决方法

需要使用滤镜来做，方法是在样式中加入：{filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/XXXX.png);background:none;}

9.推荐的IE6 hack 方法

在样式表中用下划线的方式对样式表进行hack有缺点，IE浏览器在某些特殊情况下对这种方式不支持，导致页面加载时样式无法读取发生错误，最好的方法是：<!--[if IE 6]><style></style><![endif]-->

10.父级元素png做背景上加了滤镜后非透明的链接无法点击了

是因为filter后的图像把这些都盖上了，给超链接加 position：relative的方法也会在父级绝对定位的情况下失去作用，那么我们就需要改变思路，在父级中专门再建一个div，用它来加载背景png，就可以解决这个问题。

11.只为父级加了margin，可子级元素在严格限定排版宽高的父级中串行/错位

因为父级的margin会遗传给子级，导致子级有了margin，同时还有了双倍，最好的办法就是在子级的样式表中再把margin弄成自己想要的。

--------------------------------------分割线------------------------------------------------------------------

IE6 无可奈何的缺陷：

1.hover：只有带href的家伙才能支持hover，其他的东西不支持。

2.父元素已经规定好宽高，但子元素过宽或过高会把父元素撑大问题无法避免。只能尽量避免。

3.1px问题：子元素绝对定位，当父元素的宽高为奇数时，导致子元素的right和bottom比目标值大1px。只能尽量避免

4.当li包含块级元素且垂直显示的时候，会发生垂直的li间出现其他浏览器没有的空隙，解决办法对布局是有毁伤的：把li display:inline;