IE6重复字符BUG
来源:互联网 发布:软件质量计划 编辑:程序博客网 时间:2024/06/05 08:44
IE6重复字符BUG
IE6重复字符BUG
好久没遇到如此有趣的BUG了,有多有趣呢?看下面的图~
在IE6里多出了几个字符?是的,很诡异吧~但是绝对是同样的源代码哦~!
你可以下载下面的HTML文档,在IE6中查看一下效果。 后面的注释是4种解决方法,可以一一删掉注释查看。
下载测试
出现这个BUG的“机遇“其实并不大,要满足以下一个或者多个条件:
<div style=“float:left;background998675;colorfff;width:480px;height:40px;
line-height:40px;padding:0 10px;”>
A-element
</div>
<div style=“float:left;display:none; overflow:scroll”></div>
<div style=“float:left;display:none;”></div>
<div style=“float:left;display:none;”></div>
<div style=“float:left;display:none;”></div>
<div style=“float:left;width:480px;backgroundfffbb2;color998675;height:40px;
line-height:40px;padding:0 10px;”>
G-element多出来的字的数量=注释或者dispaly:none等隐藏元素的数量*2-2
</div>
</div>
有个特别有意思的情况出现,当我在最后一个显示的div前,再加display:none;的div,下面又会增加不固定的数量的重复文字!
最终得出的结论是:溢出文字的字数=注释的条数 *2-1
这个变态BUG的最早文献是出现在2004年,这里可见。
我不全文翻译了,总结一下他的方法。
当然有同学会说,既然已经display:none了,那为什么不直接把这个DIV删掉呢?因为一个程序控制display:none或者display:block的动态DIV, 静态页面一般不会有这个问题。
display:inline;其实在IE6中著名的3pxBUG中也出现过,于是我又尝试使用了他的另外一个解决方法,margin-right:-3px;果然也可以解决。但是因为在IE7里没有影响,同学使用这个方法时候,最好是加个IE6的hack:_margin-right:-3px;
再然后既然是隐藏元素激发了BUG,那么我们可以在这个浮动的隐藏元素外面再嵌套一个DIV。
解决方法总结:
有同学说IE6不需要管了,确实是,我作为个人博主我就可以不管IE6!但是企业网站等等,面对中国广泛的IE6用户,还是要有责任心的,谢谢
好久没遇到如此有趣的BUG了,有多有趣呢?看下面的图~
在IE6里多出了几个字符?是的,很诡异吧~但是绝对是同样的源代码哦~!
你可以下载下面的HTML文档,在IE6中查看一下效果。 后面的注释是4种解决方法,可以一一删掉注释查看。
下载测试
出现这个BUG的“机遇“其实并不大,要满足以下一个或者多个条件:
1.父元素的内部有多个浮动元素。<div style=“width:500px;font-size:12px;font-weight:bold;”>
2. 最后一个浮动元素前有隐藏元素:包括html注释和display:none的元素
3.子元素的宽度和父元素相同,父元素的宽度减去子元素宽度小于3px
<div style=“float:left;background998675;colorfff;width:480px;height:40px;
line-height:40px;padding:0 10px;”>
A-element
</div>
<div style=“float:left;display:none; overflow:scroll”></div>
<div style=“float:left;display:none;”></div>
<div style=“float:left;display:none;”></div>
<div style=“float:left;display:none;”></div>
<div style=“float:left;width:480px;backgroundfffbb2;color998675;height:40px;
line-height:40px;padding:0 10px;”>
G-element多出来的字的数量=注释或者dispaly:none等隐藏元素的数量*2-2
</div>
</div>
有个特别有意思的情况出现,当我在最后一个显示的div前,再加display:none;的div,下面又会增加不固定的数量的重复文字!
最终得出的结论是:溢出文字的字数=注释的条数 *2-1
这个变态BUG的最早文献是出现在2004年,这里可见。
我不全文翻译了,总结一下他的方法。
1.把浮动的子元素加上display:inline;属性但是,我发现我这里没有运用注释也出现了这个状况,可以看出,不仅对于注释这类语句,只要是HTML代码中隐藏掉的元素,都会导致这个BUG的出现。
2.去掉注释 ,使用IE专用注释。<!–[if !IE]>Put your commentary in here…<![endif]–>
当然有同学会说,既然已经display:none了,那为什么不直接把这个DIV删掉呢?因为一个程序控制display:none或者display:block的动态DIV, 静态页面一般不会有这个问题。
display:inline;其实在IE6中著名的3pxBUG中也出现过,于是我又尝试使用了他的另外一个解决方法,margin-right:-3px;果然也可以解决。但是因为在IE7里没有影响,同学使用这个方法时候,最好是加个IE6的hack:_margin-right:-3px;
再然后既然是隐藏元素激发了BUG,那么我们可以在这个浮动的隐藏元素外面再嵌套一个DIV。
解决方法总结:
1.把浮动的子元素加上display:inline;属性(推荐)本文是在我遇到问题后在网上查阅了中外各个版本的文献后再加上自己想法总结得出的结论贴,方法不少,大家遇到该状况时候,请针对自己的实际情况选择方法。
2.去掉注释和所有隐藏元素(缺点:特殊情况下不一定可以删除)
3. 把浮动的子元素加上margin-right:-3px;属性(缺点:要加IE6的hack,也算是好方法)
4.在隐藏的DIV外嵌套一个DIV(缺点:增加的结果复杂性)
有同学说IE6不需要管了,确实是,我作为个人博主我就可以不管IE6!但是企业网站等等,面对中国广泛的IE6用户,还是要有责任心的,谢谢
转载自:http://www.cnblogs.com/muyou/archive/2011/08/10/2133842.html
0 0
- IE6 重复字符bug
- IE6重复字符BUG
- IE6重复字符的BUG
- IE6出现重复字符的bug
- IE6出现重复字符的bug解决方法
- IE6 重复字符的bug及解决方法
- IE6尾部重复字符bug , IE6下产生多余字符的BUG
- IE魅影-IE6重复字符的BUG【转】
- IE6 浮动元素之间注释太多 导致重复字符BUG
- ie6 重复字符BUG问题的简单解决方法
- IE6出现重复字符(文字溢出)的bug
- IE6下DIV容器中双Float元素字符重影bug(IE6重复文字bug)
- IE6 "经典"内容重复 bug
- 一个IE6下重复加载的BUG
- 一个IE6下重复加载的BUG
- IE6,7,8下多余字符bug
- ie6 bug
- ie6---bug
- 生成排列(next_permutation(a, a + n))
- PhoneGap 04 PhoneGap build 介绍
- 面向对象设计原则之开闭原则
- SpringMVC基本环境的配置
- bat定时任务
- IE6重复字符BUG
- stm32f10看门狗程序频繁复位程序无法烧写成功
- win7下载Spring源码
- “本地游戏管理程序” 源码分享
- C#数组 一维数组、二维数组、三维数组
- 读书笔记——Windows环境下32位汇编语言程序设计(9)ANSII字符大小写转大写
- cocos2d-x c++ 和 java互调
- 桥梁模式
- tomcat(一) 概览