IE6 bug(一)
1.IE6的[疯狂之一]IE6中奇数宽高的BUG
IE6真是太疯狂了。今天由于项目需要做了这么一个布局：一个外部的相对定位div，内部一个绝对定位的div（right:0），
如图：
可是在IE6下查看，却变成了right:1px的效果了：
IE6还有奇数宽高的bug，解决方案就是将外部相对定位的div宽度改成偶数。高度也是一样的
查看源码：
CSS代码:
width: 609px;/*这里宽度为奇数，bug就出现了！！改成偶数就OK了*/
height: 300px;
position: relative;
background:#FF0000;
color:#FFF;
}
#inn {
width: 200px;
height: 250px;
position: absolute;
top: 0px;
right: 0px;
background:#000000;
}
XML/HTML代码:
<div id=“inn”>此处为内部绝对定位的 DIV</div>
</div>
2.【IE6的疯狂之二】IE6中PNG Alpha透明(全集)
,fireofx,opera,及至webkit内核的chrome ,safari….. 这些浏览器均支持png的Alpha透明。
很多人说IE6不支持PNG透明，其实IE支持100%透明的PNG，疯狂的IE6只是不支持png的Alpha透明。
这个BUG给我们带来了很大的困扰。
但是这仍然存在很多问题，比如半透明的PNG背景图片。
Gulu77整理了4种IE6中PNG Alpha透明的方法：
测试实例：http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_IE6png8/index.html
这里用IE6测试，插入的图片和背景图片没有透明。
第一种方法：AlphaImageLoader 筛选器
微软给出了一个解决方案：http://support.microsoft.com/kb/294714/zh-cn
使用简介：在每个标签样式中插入 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’, sizingMethod=’scale’)
注意事项:
AlphaImageLoader难以实现插入图片<img src=”.png”/>透明
AlphaImageLoader方法用于背景图片上,实现background-image的效果
AlphaImageLoader IE8不支持
因为IE7支持AlphaImageLoader,避免冲突建议使用CSS hack区分开,只针对IE6使用
测试实例：http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_AlphaImageLoader/index.html
第二种方法：PNG Transparency in IE
使用简介：相对来说比较简洁，使用一段包含滤镜的JavaScript 就可以模拟图片或背景 PNG alpha 透明度
注意事项:
根目录的spacer.gif透明图片作为png图片的替换,写在JavaScript中的spacer.gif路径根据需要调整
PNGTransparncyinIE方法在背景应用上只能做到background-image的效果, 背景重复坐标调用等暂时实现不了
官方原文：http://codingforums.com/archive/index.php?t-80555.html
测试实例：http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_PNGTransparncyinIE/index.html
第三种方法：IE PNG Fix v1.0 / 2.0 Alpha 3
这是目前最新版本，今天重点介绍的一个方法。
使用简介：页面标签使用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>这的CSS选择器必须包含标签/内容要巴布亚新几内亚支持-基本上，给它一个逗号分隔的清单上的标签使用。它还必须包括正确的路径。宏达相对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';同样的路径是相对的HTML文件。否则，你将看到一个“破碎的形象”的图形！
- 如果你想支持CSS1背景重复和背景位置，请务必包括附加。 js文件在您
<head>：
<script type="text/javascript" src="iepngfix_tilebg.js"></script>否则，背景图片可以工作，但不会重复或立场。
- 可以舒舒服服地坐下欣赏！ 也许考虑捐助，以支持该脚本的发展如果你喜欢您所看到的，因为我花了数百小时的开发，测试和支持它： ） 。另外，我一定会感谢一个入链接您的网站到地雷！
官方原文：http://www.twinhelix.com/css/iepngfix/
如果你有兴趣了解更多信息或另一种方法激活的脚本保持审定的CSS相容性，看到源代码演示文件。
- 复制并粘贴
———————————————————————–
如何解决共同问题
- 1.我已经贴在CSS中，但我pngs并不透明！
请务必记住，路径个文件是相对于HTML文件，而不是的CSS文件（如的CSS背景图像） 。 如果您想要测试的路径，插入：alert('This works!');进入。宏达文件。
- 2.它的工程离线而不是在线。
第一次尝试解压这个预设的示范和上传到Web服务器原样。 如果它不工作，您可能有一个MIME类型的问题。您必须确保您的服务器发送正确的MIME类型“文本/的X组成部分”的。宏达文件。尝试之一，这两个容易修复程序：
3.上传的。 “ htaccess ”文件，该脚本的下载压缩到Web服务器上，这将使阿帕奇发出正确的MIME类型。
4.而不是所谓的“ IEPNGFIX.HTC ”从你的CSS ，上传IEPNGFIX.PHP的同一文件夹中，并呼吁不是，这也发出了正确的MIME类型。
- 5.我pngs是透明的，但有一个有趣的边界或红色的“ X ”图标。
检查blankImg变量设置正确的。宏达文件，再次相对应的HTML文件，载PNGs 。
- 图像扭曲，或此脚本休息，我的网页布局。
当适用于图像没有设置方面，该脚本将尝试与“猜测”正确的图像尺寸和适用的。如果它获得做错了什么，给您一个明确的图像width 。
- 链接或表单元素一个png’d元素是不能点击。
测试实例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
第四种方法：IE PNG Fix v1.0 / 2.0 Alpha 3
使用简介：ie7/ie8-js是一个解决IE与W3C标准的冲突的JS库，使微软的IE的行为像一个Web标准兼容的浏览器，支持更多的W3C标准。
官方原文：http://code.google.com/p/ie7-js/
测试实例：http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_ie7-js/index.html
3.IE6 3像素BUG的实例
问题：2列布局。左列固定，右列液态
我需要做一个布局。
2列，左边列固定宽度。右边列使用剩余宽度。整体宽度不固定，这样不管在17 还是19的屏幕上，左边列始终宽度不变，右边列宽度始终占据剩余宽度。
但是我写这个布局缺在ie6下面始终解决不了3像素bug。
请在IE6下测试
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “<a href=”http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd” target=”_blank” rel=”external”>http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd</a>”>
<!– saved from url=(0027)<a href=”http://www.chen-jing.cn/12/” target=”_blank” rel=”external”>http://www.chen-jing.cn/12/</a> –>
<HTML xmlns=”<a href=”http://www.w3.org/1999/xhtml” target=”_blank” rel=”external”>http://www.w3.org/1999/xhtml</a>”><HEAD><TITLE>关于3像素bug的延生</TITLE>
<META http-equiv=Content-Type content=”text/html; charset=gb2312″>
<STYLE type=text/css>BODY {
FONT-SIZE: 12px
}
.a1 {
BACKGROUND: #333; FLOAT: left; WIDTH: 100px; COLOR: #ffffff; HEIGHT: 240px
}
.a2 {
BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; MARGIN-LEFT: 100px; BORDER-LEFT: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid
}
.a2 #jing {
BACKGROUND: #00ccff; MARGIN-LEFT: -3px; HEIGHT: 100px
}
.a2 #jing2 {
BACKGROUND: #ff9900; HEIGHT: 100px
}
</STYLE>
<META content=”MSHTML 6.00.6000.16587″ name=GENERATOR></HEAD>
<BODY>
<DIV class="a1">我是class=a1 <BR><A style=”COLOR: #ffff00″
onclick=”this.parentNode.style.height=’100px’”
href=”<a href=”http://www.chen-jing.cn/12/” target=”_blank” rel=”external”>http://www.chen-jing.cn/12/</a>#”>点击设置a1的高度为100</A><BR><A
style=”COLOR: #ffff00″ onClick=”this.parentNode.style.height=’150px’”
href=”<a href=”http://www.chen-jing.cn/12/” target=”_blank” rel=”external”>http://www.chen-jing.cn/12/</a>#”>点击设置a1的高度为150</A></DIV>
<DIV class="a2">
<DIV
id=jing>我是id=jing<BR>这个问题存在于IE6里面。ie7，opera，ff都没问题。观察class=a2的div所设置的边框会发现，a2和a1之间是没有距离的。但是a2
里面元素（文本）会和a2之间产生类似padding-left:3px;的效果。利用以往的设置负值，也没办法消除第一个元素id=jing和a2的距离。更有意思的是当我设置了_margin-left:-3px;原本id=jing和a2
之间的3像素距离变成了2像素。但是及时我_margin-left 的负值设置得再大，不能完全消除</DIV>
<DIV id=jing2>我是id=jing2<BR>当a1的高度大于id=jing这个元素的高度的时候，di=jing2
也会产生和a2之间类似padding-left：3px的间距。 当a1 小于或者等于id=jing的时候，id=jing2
就不会和a2之间有间距。<BR>本来我只是想做一个左列固定，右列自动适应剩余宽度的布局。但是没想到发现了这个问题。求某位高手告诉我怎么解决。
</DIV></DIV></BODY></HTML>
