浏览器兼容之旅第四站浏览器兼容之旅第四站: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 》一文。
二、IE下图片缩放二、IE下图片缩放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=’http://shenmo.wanmei.com/images/logo/sm_logo_202x104.png’,sizingMethod=’scale’);
}