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

2020-04-27 07:30:28易采站长站整理

《浏览器兼容之旅第三站: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下图片缩放Bug
这个你一定会喜欢,就是图片在IE下缩放时会影响其质量,你可以让他和别的浏览器对比一下,IE下看起图片质量极差: