在IE6下使用浮动可能会出现文字重复的情况.

在IE6下，浮动层之间有注释文字的话，之前那个浮动层的内容文字就有可能遭遇一个“隐形”的复制，但是代码里查看文字可并没有多出来。

看个例子：

XML/HTML代码
  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=gb2312″ />
  5. <title>多了一只猪</title>
  6. </head>
  7. <body>
  8. <div style=“width:400px”>
  9. <div style=“float:left”></div>
  10. <!– _ –>
  11. <div style=“float:right;width:400px”>↓这就是多出来的那只猪</div>
  12. </div>
  13. </body>
  14. </html>

用IE6看一下，你会发现真的会多出一只“猪”！

问题原因以及解决方法：

原因：
由注释造成文字溢出，属于IE6的BUG，溢出文字的字数=注释的条数*2-1，这里的字数在中文或英文数字时都成立。注释坐在位置与溢出位置、区块的浮动以及文字区块的固定宽度有必然联系。

解决办法：
1、不放置注释。最简单、最快捷的解决方法；
2、注释不要放置于2个浮动的区块之间；
3、将文字区块包含在新的<div></div>之间，如：<div style=”float:right;width:400px”><div>↓这就是多出来的那只猪</div></div>；
4、去除文字区块的固定宽度，与3有相似之处；
5、在后面加一个<br />或者空格；（不推荐）
6、使用IE注释格式，如：<!–[if !IE]>Put your commentary in here…<![endif]–>
7、给盒子加position:relative;属性

引发这种BUG有几个条件
1、是注释引起的,删除所有注释即可.
2、hidden的input直接放在form下.
3、display为none的div也有可能引发此bug.
2、3可以通过外面再包一次DIV解决

转载请注明转自《【IE6的疯狂之四】IE6文字溢出BUG》

【IE6的疯狂之四】IE6文字溢出BUG的更多相关文章

  1. IE6文字溢出BUG(多出来的猪问题)

    在IE6下使用浮动可能会出现文字重复的情况. 在IE6下,浮动层之间有注释文字的话,之前那个浮动层的内容文字就有可能遭遇一个“隐形”的复制,但是代码里查看文字可并没有多出来. 看个例子: HTML & ...

  2. 【IE6的疯狂之十三】IE6下使用滤镜后链接不能点击的BUG

    大家可能都知道IE6下使用DXImageTransform.Microsoft.AlphaImageLoader滤镜(用于PNG32 Alpha透明)后链接不能点击的BUG,大家也都知道只要在a标签上 ...

  3. 【IE6的疯狂之十二】一个display:none引起的3像素的BUG

    今天同事给我看了一个display:none引起的3像素的BUG,非常奇怪!从来没碰到过display:none还能引起这种bug. 看代码:   <div style="width: ...

  4. 【IE6的疯狂之十一】CSS的优先级及!important在IE6下的BUG

    一 css的优先级 今天有人跟我说css hack中用!important来区分ie6,因为ie6不支持!important,是的在很早以前我也是用过这种方法写hack,但是后来就基本不用了.本来我对 ...

  5. 【IE6的疯狂之十】父级使用padding后子元素绝对定位的BUG

    在前端开发中,经常会用到css的position:absolute来使层浮动,前通过left,top,right等属性来对层进行定位,但ie6对left,top,right等属性的解释和ie7,ie8 ...

  6. 【IE6的疯狂之九】li在IE中底部空行的BUG

    曾经写过[IE6的疯狂之六]li在IE中底部3像素的BUG(增加浮动解决问题),原文地址:http://www.css88.com/archives/421: IE6 BUG大全: http://ww ...

  7. 【IE6的疯狂之八】链接伪类（:hover）CSS背景图片有闪动BUG

    IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath ...

  8. 【IE6的疯狂之六】li在IE中底部3像素的BUG（增加浮动解决问题）

    今天开发项目中碰到一个li在IE中的BUG,先来看设计原型(如图:) 两个红色中间是<li>1px的底边框: 我写的代码如下: ============================== ...

  9. 【IE6的疯狂之三】IE6 3像素BUG的实例

    问题:2列布局.左列固定,右列液态我需要做一个布局.2列,左边列固定宽度.右边列使用剩余宽度.整体宽度不固定,这样不管在17 还是19的屏幕上,左边列始终宽度不变,右边列宽度始终占据剩余宽度.但是我写 ...

随机推荐

  1. 【译】TensorFlow Python Docs 之 overview

    Overview 综述 TensorFlow has APIs available in several languages both for constructing and executing a ...

  2. Oracle PLSQL笔记（过程的创建和及调用）

    过程(procedure): 用于在数据库中完成特定的操作或者任务.是一个PLSQL程序块,可以永久的保存在数据库中以供其他程序调用. 一.创建所需的表USERS create table users ...

  3. jQuery+JSON+jPlayer实现QQ空间音乐查询

    演示地址: http://bejson.com/demos/qqmusic/ 代码下载:http://www.jqdemo.com/932.html 查询QQ音乐是很早前就出来的一个接口. 这里使用j ...

  4. Django入门实践（一）

    Django入门实践(一) Django编程思路+入门 认识Django有一个多月了,我觉得学习Django应该先理清它的编程思路.它是典型的MVC框架(在Django里也称MTV),我觉得Djang ...

  5. Android 短信模块分析(三) MMS入口分析

    MMS入口分析:      在Mms中最重要的两个Activity,一个是conversationList(短信列表) ,另一个就是ComposeMessageActivity(单个对话或者短信).每 ...

  6. [设计模式-创建型]工厂方法(Factory Method)

    概括 名称 Factory Method 结构 动机 定义一个用于创建对象的接口,让子类决定实例化哪一个类.Factory Method 使一个类的实例化延迟到其子类. 适用性 当一个类不知道它所必 ...

  7. 用python写爬虫

    Python提供了许多Module,通过这些Module,可以很简单的做一些工作.比如,要获得cloga这个词在百度搜索结果页中的排名结果(排名结果+URL),这就是一个很简单的爬虫需求. 首先,要通 ...

  8. [置顶] cuzy sdk之起源

    程序员都熟知一句话, “不要重复制造轮子".应该说互联网的繁荣和普及给刚入门的软件工程师还是带来很大的好处的.尤其是github,sourceforge在国内日渐的流行. 在学习iOS和an ...

  9. Spring事务的传播行为 @Transactional(转)

    Spring事务的传播行为 在service类前加上@Transactional,声明这个service所有方法需要事务管理.每一个业务方法开始时都会打开一个事务. Spring默认情况下会对运行期例 ...

  10. winform总结4> 工欲善其事，必先利其器之xml校验

    @echo 根据xml自动生成xml @echo 当前路径包含空格会导致执行失败 ::pause @echo off set path=%~dp0 for /r %path% %%i in (*.xm ...