在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. node包管理器

    NPM小结   nodejs的出现,可以算是前端里程碑式的一个事件,它让前端攻城狮们摆脱了浏览器的束缚,踏上了一个更加宽广的舞台.前端的可能性,从此更加具有想象空间. 随着一系列基于nodes的应用/ ...

  2. MVC3升级到MVC4模型验证信息显示为英文问题及解决方案

    最近把项目从mvc3升级到mvc4,部署到服务器上出现了一个小问题,就是在表单里字段验证时,验证显示信息为英文,如下: The field 平均租金 must be a number 而在本地是好的, ...

  3. DateTimePicker.Text不靠谱

    DateTimePicker.Text不靠谱 获取时:在DateTimePicker.ValueChanged事件中,获取到的Text有可能是string.Empty!!!,特别当ValueChang ...

  4. 大数据应用日志采集之Scribe演示实例完全解析

    大数据应用日志采集之Scribe演示实例完全解析 引子: Scribe是Facebook开源的日志收集系统,在Facebook内部已经得到大量的应用.它能够从各种日志源上收集日志,存储到一个中央存储系 ...

  5. 第一个windows 小游戏 贪吃蛇

    最近用dx尝试做了一个小的贪吃蛇游戏,代码放到github上面:https://github.com/nightwolf-chen/MyFreakout 说一下自己实现的过程: 首先,我把蛇这个抽象成 ...

  6. Jenkins安装plugin

    Jenkins支持很多的plugin,这些plugin极大地丰富了Jenkins的功能.安装plugin有两种方式:自动安装和手动安装. 1.自动安装 这种方式非常简单,但前提是Jenkins必须连接 ...

  7. hdu 3333 Turing Tree（线段树+离散化）

    刚看到是3xian大牛的题就让我菊花一紧,觉着这题肯定各种高端大气上档次,结果果然没让我失望. 刚开始我以为是一个普通的线段树区间求和,然后啪啪啪代码敲完测试没通过,才注意到这个求和是要去掉相同的值的 ...

  8. 基于session 的springMvc 国际化

    项目中采用springMvc的框架,需要动态切换语言,找了一些资料,最后决定采用基于session的动态切换,实现动态切换中文,英文,韩文,其实就是把中文翻译成其他语言显示 springMvc国际化包 ...

  9. express搭建简易web的服务器

    express搭建简易web的服务器 说到express我们就会想到nodejs,应为它是一款基于nodejs平台的web应用开发框架.既然它是基于nodejs平台的框架那么就得先安装nodejs. ...

  10. Anaconda安装第三方包（whl文件）

    先说下环境 Anaconda 对应Python3.5的版本 win7,64位系统. step1:下载whl文件 step2:打开‘Anaconda Command Prompt‘, 如下图: step ...