zoukankan      html  css  js  c++  java
  • IE6 重复字符的bug

    • 一个容器包含2两个具有“float”样式的子容器。
    • 第二个容器的宽度大于父容器的宽度,或者父容器宽度减去第二个容器宽度的值小于3。(说到3,这里稍微多说一句——IE7还修正了IE6中的一个bug,bug名字就叫做“3像素bug”)
    • 在第二个容器前存在注释(这也是为什么此bug也叫做“IE6注释bug”的原因)。
    <!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Keywords" content="YES!B/S!,web标准,杨正祎,博客园,实例代码" />
    <meta name="Description" content="这是一个简单YES!B/S!文章示例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/" />
    <title>YES!B/S!文章示例页面</title>
    </head>
    <body>
    <div style="200px;">
    <div style="float:left;"></div>
    <!-- 如果是IE6,你将多看到一个“影”字 -->
    <div style="float:left;200px;">歌剧院的魅影</div>
    </div>
    </body>
    </html>

    http://www.cnblogs.com/echohqu/archive/2008/09/02/1282166.html

    为何会出现重复文字
    bug虽然的的确确的存在,但是为什么会出现这样的bug依然没有统一的定论。不同的高手也是各执一词,谁也说服不了谁。真正的原因也许只有当时的IE6团队才能道出来,但是现在仍然没有官方的说法。下面列出来的这两种说法,是只是现在网上认可度比较高的而已——

    IE6浏览器对<!-- -->注释的解释存在bug引起的。
    “3像素bug”的扩展后遗症。(“3像素bug”我们将在《IE7的web标准之道》系列以后的文章中讲到)
    其他的一些说法

    如何消灭重复文字
    引起的原因,也许我们可以不知道,但是如何去消除却是我们一定要关注的。
    “歌剧院魅影bug”已经在IE7中得到修正,在FireFox和Opera中也不会出现,所以bug的修正主要是针对IE6的。

    针对于上文中讲到的“bug重现条件”,如果要修正bug,只要让任何一个条件不满足即可——

    改变结构,不出现【一个容器包含2两个具有“float”样式的子容器】的结构。
    ——此解决方案的评论:疯了!因噎废食的做法。
    减小第二个容器的宽度,使父容器宽度减去第二个容器宽度的值大于3,例如将本文示例中第二个子容器的宽度改为197px。
    ——此解决方案的评论:在满足页面布局的前提下可以使用。但是当情况比较复杂的时候,可能实施起来比较困难。
    去掉所有的注释。
    ——此解决方案的评论:最直接的做法,但是“没有注释的代码”,的确不是一个好的代码写作习惯。
    修正注释的写法。将 <!-- 这里是注释内容 -->写成<!--[if !IE]>这里是注释内容<![endif]-->
    ——此解决方案的评论:还不错的解决方案,但是并不是每个人都对<!--[if !IE]>这里是注释内容[endif]-->这种注释写法很欣赏。
    在第二个容器后面加一个或者多个<div style="clear"></div>来解决。
    ——此解决方案的评论:另人感觉很不爽的解决方案。但是的确能解决。影响网页效率
    其他的你提供的方法

    关于此bug的一些文章资料
    其实很早以前就有外国的朋友关注过这个bug,而且在中国也有过一些朋友关注过这个bug。我在写这篇文章的时候,也一定程度上参照了他们的研究成果,在此向研究此问题的前辈们表示感谢。下面是两篇研究此bug的文章。希望对你有进一步的帮助。

    Holly 'n John 于2004年2月18号发表的一篇文章: 《Explorer 6 Duplicate Characters Bug 》,这是关于此bug比较权威的一篇文章。
    经典论坛版主怿飞的《注释在IE中造成文字溢出的研究》。顺便说一下怿飞是一个在web标准方便很有研究的朋友。虽然没有直接和他接触过,但是却一直拜读他的文章。在此也给这位文章曾给予我很大帮助的朋友做个广告,他的博客为地址为:http://www.planabc.net/

    http://hi.baidu.com/oxolin/blog/item/74d37d504c6e0c6b843524c6.html


  • 相关阅读:
    Alpha冲刺(2/10)——2019.4.25
    Alpha冲刺(1/10)——2019.4.24
    Alpha冲刺——序言篇(任务与计划)
    团队作业第六次—团队Github实战训练
    团队第四次作业答辩——反思与总结
    团队作业第五次—项目系统设计与数据库设计
    项目Alpha冲刺--6/10
    项目Alpha冲刺--5/10
    项目Alpha冲刺--4/10
    项目Alpha冲刺--3/10
  • 原文地址:https://www.cnblogs.com/aaa6818162/p/1635468.html
Copyright © 2011-2022 走看看