浏览器兼容之旅第四站:IE常见Bug总结及修复方法—part2 _云知道

《浏览器兼容之旅第三站:IE常见Bug总结及修复方法part1》中介绍了IE浏览器下十种经典的Bug产生的原因，以及如何在写代码中避免这些Bug的产生，或者说Bug发生后，又如何来解决这些Bug 。这节我们接着来看IE下的相关Bug 。尽量了解并掌握他们，只有知已知彼才能百战百胜。因为大家都尝过IE下的苦楚，有时为了一个Bug纠结一两天，或者更长的都有，以致于都想头撞南墙，不想活了，这都是IE给逼的呀。不过随着时间往后的推移，我也不觉得他有什么恐怖的，我认为写代码时，结构上多加注意，写样式时尽量避免。这样一来，也没有多少Bug会缠着你。别的不说了，我们继续下面的内容IE的Bug处理。

一、IE6克隆文本的Bug
这个Bug在IE6下碰到代码的注释常发生，时常用朋友问到，怎么我的没有输入这个东西，怎么会生成呢？我们来看下面的一张图，展示的就是月IE6下无故多了一些文本：

在我们的Html代码为：

复制代码代码如下:
!-- IE6 does not like comments --
div class="floating_div"
... some markup ...
/div
!-- IE6 does not like comments really --

往往你的结构如上面的风格时，就会碰到IE6下多了一段文本，不过这样的Bug不会说，结构类似上面就会产生，这也要看你的运气了，你运气不好，你一直没机会看到这样的Bug,你要是运气好，常能看到。是不是对IE6更加无语了。那么针对这样的Bug要如何处理呢？也很简单

方法一：
方法一是使用条件注释，这样可以轻松的避开这个Bug 。有关于条件注释的使用，大家可以点击《浏览器兼容之旅的第一站:如何创建条件样式》查阅。我们来看代码：

复制代码代码如下:
!--[if IE] IE6 does not like comments ![endif]--
div class="floating_div"
... some markup ...
/div
!--[if IE] IE6 does not like comments ![endif]--

方法二：在注释前面的那个浮动元素加上display:inline
方法三：最安全的解决方法，也是最简单的方法，把注释全部去掉。这样就永远不会有这个Bug发生。
个人更趋向于方法一和方法三，当然大家要是想了解更多有关天这个Bug话，还可以点击 Adam Hicks 写的《IE6 Ghost Text Bug 》一文。

二、ＩＥ下图片缩放Bug
这个你一定会喜欢，就是图片在IE下缩放时会影响其质量，你可以让他和别的浏览器对比一下，IE下看起图片质量极差：

解决办法：

复制代码代码如下:
img { -ms-interpolation-mode: bicubic; }

三、IE6下PNG图片透明Bug
大家都知道，有时需要使用透明图片，别然gif和png8都可以制作透明图片，但这两者对于要求强美感的你来说一定达不到你的要求，因为会有杂边，那么使用png24或png32图片，质量是没有问题了，可引发另一个头痛的问题，就是IE6下面显示图片会有一层淡兰色的背景，

这样一来我们需要起办法来解决掉这层淡兰色的背景色，方法很多，常用的有两种：
方法一：滤镜的方法

复制代码代码如下:
.img{
background:url(’http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png’);
_background:0;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=https://www.rkxy.com.cn/dnjc/’http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png’,sizingMethod=’scale’);
}
或者：
img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=https://www.rkxy.com.cn/dnjc/’http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png’,sizingMethod=’scale’);