作为一名Web前端工作人员,经常会遇到很多浏览器不兼容的问题，尤其打交道最多的便是IE6.
由于很多原因，我们也没办法完全屏蔽它。所以在此总结一些IE6 Bug和解决方案，供自己和广大前端工作人员参考。
参考：http://www.css88.com/archives/579
1.双外边距浮动Bug(margin+float)
图 1
我们要让绿色盒模型在蓝色盒模型之内向左浮动，并且距蓝色盒模型左侧100像素。
这个例子很常见，比如在网页布局中，侧边栏靠左侧内容栏浮动，并且要留出内容栏的宽度。要实现这样的效果，
我们给绿色盒模型应用以下CSS属性：
.floatbox{
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
/*外边距的最后一个值保 证了100像素的距离*/}
图 2
解决方案：
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;
}
结果：
图 3
2.png格式Alpha透明问题
问题分析：ie7及其以上的浏览器,fireofx,opera及至webkit内核的chrome ,safari, 这些浏览器均支持png的Alpha透明
ie6与生俱来就支持png8的索引色透明度，但不支持png8位以上的alpha 透明度。
测试页面：http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_IE6png8/index.html
(ps.而对于非动画的GIF建议你使用PNG8，因为体积会更小)
问题分为2种情况：
第一种是以img方式插入html中的图片，
IE PNG Fix v1.0 / 2.0 Alpha 3(利用JS)
这是目前最新版本，今天重点介绍的一个方法。
使用简介：页面标签使用behavior:url("iepngfix.htc");来调用外部包含js、css的iepngfix.htc文件來修正PNG alpha 透明度.
测试实例1：http://www.css88.com/demo/IE6_bug/IE6_bug_2/IE6_bug_2.html
测试实例2（官方，e文）：http://www.css88.com/demo/IE6_bug/IE6_bug_2/iepngfix.html
- 支持<img src=”">元素。
- 支持的背景PNG图像（不像许多其他的脚本）
- 支持CSS1背景重复和位置（通过可选插件）
- 背景图像可以被界定内置或在外部的样式表。
- 自动处理改为钢骨混凝土/背景通过正常的JavaScript （例如鼠标悬停翻车） -没有特殊的编码需要。
- 改变支持包括CSS的’类别’的变化因素。
- 采用自动变通的<a href=”">要素巴布亚新几内亚背景因素。
- 微小的脚本（快速下载） 。
- 领有牌照的下一个自由软件许可证。
如何使用 Follow these simple steps to add this to your page:遵循这些简单的步骤，将此添加到您的网页：
- 复制并粘贴
iepngfix.htc和blank.gif到您的网站文件夹中。 - 复制并粘贴到您的网站的CSS或HTML ：
- 复制并粘贴
<style type="text/css">
img, div { behavior: url(iepngfix.htc) }
</style>
它还必须包括正确的路径。相对H TML文件的位置（不相对的CSS文件！） 。
例如，你可能看起来像这样：
<style type="text/css">
img, div, a, input { behavior: url(/css/resources/iepngfix.htc) }
</style>
如果您的网站使用的子文件夹，打开。编辑文件在文本编辑器如Windows记事本，并改变blankImg参数，包括正确道路blank.gif像这样：
IEPNGFix.blankImg = '/images/blank.gif';
如果你想支持CSS1背景重复和背景位置，请务必包括附加。 js文件在您<head> ：
<script type="text/javascript" src="iepngfix_tilebg.js"></script>
第二种是背景方式的图片background-image:url();
提出以下解决方案;
filter:AlphaImageLoader
使用简介：在每个标签样式中插入 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’, sizingMethod=’scale’)
注意事项:
AlphaImageLoader方法用于背景图片上,实现background-image的效果
AlphaImageLoader IE8不支持
因为IE7支持AlphaImageLoader,避免冲突建议使用CSS hack区分开,只针对IE6使用
测试实例：http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_AlphaImageLoader/index.html
更多方案见：http://www.css88.com/archives/577
三.IE 3像素BUG
问题：2列布局，左边列固定宽度，右边列使用剩余宽度。
左边200px,高度200px,红色背景;右边宽度自适应，高度200px,绿色背景
ie浏览器相对于左边部分位移3像素
（一开始我以为只有ie6才有问题，结果测试IE6,7,8都有问题）
代码如下：
代码
<html>
<head>
<title>两栏左边固定右边自适应</title>
<style type="text/css">
*{margin:0;padding:0}
body{
width:100%;
height:auto;
font-size:12px;
}
#left{
width:200px;
height:200px;
background:#f00;
float:left;
}
#right{
height:200px;
background:#0f0;
}
</style>
</head>
<body>
<div id="left">左边</div>
<div id="right">右边</div>
</body>
</html>
把#left修改一下,让IE浏览器margin-right:-3px;
#left{
width:200px;
height:200px;
margin-right:-3px\9;
*margin-right:-3px;
background:#f00;
float:left;
}
这样就解决了3px间距问题，但是出现了新的问题，
就是这种方法仅仅满足左右定义高度一致的情况，当右边高于左边时，不同浏览器解析不同，
如IE6-8，则左右分列，但对于FF,Chrome等浏览器右边文档流环绕浮动层。
于是修改代码如下：
代码
<html>
<head>
<title>两栏左边固定右边自适应</title>
<style type="text/css">
*{margin:0;padding:0}
body{
width:100%;
height:auto;
font-size:12px;
}
#content{
min-height:700px;
height:700px\9;
*height:700px;
}
#left{
width:200px;
height:100%;
margin-right:-3px\9;
*margin-right:-3px;
background:#f00;
float:left;
}
#right{
height:100%;
background:#0f0;
}
</style>
</head>
<body>
<div id="content">
<div id="left">左边</div>
<div id="right">右边</div>
</div>
</body>
</html>
