IE 下重复字符的 BUG 和解决办法

发布于：电脑网络, 精品推荐 1,710 次践踏

本文转自 smigoo MM 的《IE6重复字符BUG》，不过经我亲身体会，不只是 IE6 有这个 BUG，在特定条件之下，所有以 IE 为核心的浏览器下都有这 BUG，（此处省略三万字鄙视 IE 浏览器……）如果不是亲眼所见，估计读者仅看本文标题是很难想象 IE 有多变态。

先上个测试页：http://wange.im/demo/duplicate-characters-bug/，你也可以下载这个 DEMO 页的源码在本地测试，后面的注释是4种解决方法，可以一一删掉注释查看。

大家可以用 IE6、IE7、Firefox、Opera、Chrome 等主流浏览器分别来测试一下这个页面，你会发现一个有趣的现象。

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

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

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

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

有个特别有意思的情况出现，当我在最后一个显示的div前，再加display:none;的div，下面又会增加不固定的数量的重复文字！

最终得出的结论是：溢出文字的字数=注释的条数 *2-1

这个变态BUG的最早文献是出现在2004年，这里可见。

我不全文翻译了，总结一下他的方法。

1.把浮动的子元素加上display:inline;属性

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

以下是 Smigoo MM 总结的解决方法：

1.把浮动的子元素加上display:inline;属性（推荐）

2.去掉注释和所有隐藏元素（缺点：特殊情况下不一定可以删除）

3. 把浮动的子元素加上margin-right:-3px;属性（缺点：要加IE6的hack，也算是好方法）

4.在隐藏的DIV外嵌套一个DIV（缺点：增加的结果复杂性）

经过结合 smigoo MM 的总结，和我遇到的实际情况，因为我的父级浮动元素比较多，导致在 IE7/IE8 下都出现重复字符的囧境，所以我个人建议把浮动元素改成 display:inline-block;

现在算是完美解决了 IE 下重复字符的问题，感谢 smigoo MM，再一次让我认清了 IE 的丑恶本质，和 G/F/W 有的一拼！