IE6重复字符BUG

好久没遇到如此有趣的BUG了，有多有趣呢？看下面的图~

在IE6里多出了几个字符？是的，很诡异吧~但是绝对是同样的源代码哦~！

你可以下载下面的HTML文档，在IE6中查看一下效果。后面的注释是4种解决方法，可以一一删掉注释查看。

下载测试

出现这个BUG的“机遇“其实并不大，要满足以下一个或者多个条件：

1.父元素的内部有多个浮动元素。

2. 最后一个浮动元素前有隐藏元素：包括html注释和display：none的元素

3.子元素的宽度和父元素相同，父元素的宽度减去子元素宽度小于3px

<div style=“width:500px;font-size:12px;font-weight:bold;”>
<div style=“float:left;background:#998675;color:#fff;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;background:#fffbb2;color:#998675;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;属性

2.去掉注释，使用IE专用注释。<!–[if !IE]>Put your commentary in here…<![endif]–>

但是，我发现我这里没有运用注释也出现了这个状况，可以看出，不仅对于注释这类语句，只要是HTML代码中隐藏掉的元素，都会导致这个BUG的出现。

当然有同学会说，既然已经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用户，还是要有责任心的，谢谢。

转载于:https://www.cnblogs.com/javashi/archive/2010/05/08/1730504.html

IE6重复字符BUG相关推荐

修复IE6重复字符Bug
在IE6中,如果一个元素中包含多个浮动元素,某些情况下,最后一个浮动元素中的最后几个字符,会在该元素的下面重复出现,被称作"IE6重复字符Bug". 当父元素的宽度减去最后一个浮动 ...
修正IE6重复文字bug
ie6 重复 BUG 问题,简单解决方法! 今天改博客底部图片连接,重复这个问题又出来了,是清除,还是加宽度,高度都白费,也无多余注释代码. 反正就是个重复,文字换成图片到不重复了.但图片变到了重复 ...
ie6常见css bug
IE6双倍边距bug 在IE6下如果某个标签使用了float属性,同时设置了其外补丁"margin:0 10px"可以看出,但第一个对象距左边有20px. 说明:这是因为块级对象默 ...
【IE6的疯狂之四】IE6文字溢出BUG
在IE6下使用浮动可能会出现文字重复的情况. 在IE6下,浮动层之间有注释文字的话,之前那个浮动层的内容文字就有可能遭遇一个"隐形"的复制,但是代码里查看文字可并没有多出来. 看个 ...
IE6浏览器的bug问题及相关解决的方法
IE6浏览器的bug问题及相关解决的方法 1.css浮动边距加倍错误(双倍边距BUG)的解决办法该错误只影响ie而不影响其他浏览器,我们可以考虑用hack来解决!!! 解决方法:_displ ...
php无重复字符的最长子串,PHP算法之无重复字符的最长子串
给定一个字符串,请你找出其中不含有重复字符的最长子串的长度. 示例 1: 输入: "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "abc&qu ...
LeetCode中等题之无重复字符的最长字串
题目给定一个字符串 s ,请你找出其中不含有重复字符的最长子串的长度. 示例 1: 输入: s = "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 &q ...
【转】SQL函数：字符串中提取数字，英文，中文，过滤重复字符
SQL函数:字符串中提取数字,英文,中文,过滤重复字符 --提取数字 IF OBJECT_ID('DBO.GET_NUMBER') IS NOT NULL DROP FUNCTION DBO.GET_ ...
【leetcode】力扣刷题(3)：无重复字符的最长子串（go语言）
一.问题描述给定一个字符串,请你找出其中不含有重复字符的最长子串的长度. 示例 1: 输入: "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 " ...

IE6重复字符BUG

解决方法总结：

IE6重复字符BUG相关推荐

最新文章

热门文章