上一篇
下一篇
实例解决IE6下常遇到的6个bug
日期:2009-08-01作者:woniu
IE6很让人头痛，下面总结了6个ie6下最长出现的bug及解决办法，希望对大家有帮助。
1. IE6的双倍边距BUG
HTML代码
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline
2. IE6下绝定位的容器内文本无法正常选择的问题
HTML代码
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
上面的问题在IE6、7中存在，解决问题的办法是让IE进入到quirks mode。
3. IE6下为什么图片下方有空隙产生
HTML代码
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
解决方法：可以是改变html的排版，或者定义img 为display:block
或者定义vertical-align属性值为vertical-align:top | bottom |middle |text-bottom
还可以设置父容器的字体大小为零，font-size:0
4. IE6下这两个层中间怎么有间隙
HTML代码
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
这个IE的3PX BUG也是经常出现的，解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;
5.IE6下容器的宽度和FF解释不同
HTML代码
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
问题的差别在于容器的整体宽度有没有将边框（border）的宽度算在其内，这里IE6解释为200PX ，而FF则解释为220PX，那究竟是怎么导致的问题呢？大家把容器顶部的xml去掉就会发现原来问题出在这，顶部的申明触发了IE的quirks mode
6.IE6使用滤镜使PNG图片透明后，容器内链接失效的问题
HTML代码
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
解决方法是为链接定义一个相对定位属性。position:relative
1. IE6的双倍边距BUG
HTML代码[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline
2. IE6下绝定位的容器内文本无法正常选择的问题
HTML代码[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
上面的问题在IE6、7中存在，解决问题的办法是让IE进入到quirks mode。
3. IE6下为什么图片下方有空隙产生
HTML代码[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
解决方法：可以是改变html的排版，或者定义img 为display:block
或者定义vertical-align属性值为vertical-align:top | bottom |middle |text-bottom
还可以设置父容器的字体大小为零，font-size:0
4. IE6下这两个层中间怎么有间隙
HTML代码[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
这个IE的3PX BUG也是经常出现的，解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;
5.IE6下容器的宽度和FF解释不同
HTML代码[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
问题的差别在于容器的整体宽度有没有将边框（border）的宽度算在其内，这里IE6解释为200PX ，而FF则解释为220PX，那究竟是怎么导致的问题呢？大家把容器顶部的xml去掉就会发现原来问题出在这，顶部的申明触发了IE的quirks mode
6.IE6使用滤镜使PNG图片透明后，容器内链接失效的问题
HTML代码[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
解决方法是为链接定义一个相对定位属性。position:relative
[本日志由 woniu 于 2009-09-10 06:15 PM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: hackie6兼容IE6bug浏览器兼容
相关日志:
文章来自: 本站原创引用通告: 查看所有引用 | 我要引用此文章Tags: hackie6兼容IE6bug浏览器兼容相关日志:
评论: 4 | 引用: 0 | 查看次数: -
回复
leilei[2009-12-07 04:15 PM | 
]很好 很强大。。 我常用的解决就是 margin-left margin-right 双倍边距bug，还有 知道图片下方有间隙的原因。其他的还没遇到过。 至于两个层之间的间隙，我的习惯是只要是水平浮动的层就一律float:left; 可能是这样 所以没碰到 这个间隙问题吧。。 呵呵。。 总之学习了。。。
woniu 于 2009-12-08 08:21 AM 回复
woniu 于 2009-12-08 08:21 AM 回复呵呵，一起学习
不会吧，我的都没有这个功能呀
这个代码是加的插件？
woniu 于 回复
woniu 于 回复自己带的
总结的很好啊 
发表评论