【IE6的疯狂之四】IE6文字溢出BUG
在IE6下使用浮动可能会出现文字重复的情况.
在IE6下，浮动层之间有注释文字的话，之前那个浮动层的内容文字就有可能遭遇一个“隐形”的复制，但是代码里查看文字可并没有多出来。
看个例子：
- <!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=gb2312″ />
- <title>多了一只猪</title>
- </head>
- <body>
- <div style=“width:400px”>
- <div style=“float:left”></div>
- <!– _ –>
- <div style=“float:right;width:400px”>↓这就是多出来的那只猪</div>
- </div>
- </body>
- </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的更多相关文章
- IE6文字溢出BUG(多出来的猪问题)
在IE6下使用浮动可能会出现文字重复的情况. 在IE6下,浮动层之间有注释文字的话,之前那个浮动层的内容文字就有可能遭遇一个“隐形”的复制,但是代码里查看文字可并没有多出来. 看个例子: HTML & ...
- 【IE6的疯狂之十三】IE6下使用滤镜后链接不能点击的BUG
大家可能都知道IE6下使用DXImageTransform.Microsoft.AlphaImageLoader滤镜(用于PNG32 Alpha透明)后链接不能点击的BUG,大家也都知道只要在a标签上 ...
- 【IE6的疯狂之十二】一个display:none引起的3像素的BUG
今天同事给我看了一个display:none引起的3像素的BUG,非常奇怪!从来没碰到过display:none还能引起这种bug. 看代码: <div style="width: ...
- 【IE6的疯狂之十一】CSS的优先级及!important在IE6下的BUG
一 css的优先级 今天有人跟我说css hack中用!important来区分ie6,因为ie6不支持!important,是的在很早以前我也是用过这种方法写hack,但是后来就基本不用了.本来我对 ...
- 【IE6的疯狂之十】父级使用padding后子元素绝对定位的BUG
在前端开发中,经常会用到css的position:absolute来使层浮动,前通过left,top,right等属性来对层进行定位,但ie6对left,top,right等属性的解释和ie7,ie8 ...
- 【IE6的疯狂之九】li在IE中底部空行的BUG
曾经写过[IE6的疯狂之六]li在IE中底部3像素的BUG(增加浮动解决问题),原文地址:http://www.css88.com/archives/421: IE6 BUG大全: http://ww ...
- 【IE6的疯狂之八】链接伪类（:hover）CSS背景图片有闪动BUG
IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath ...
- 【IE6的疯狂之六】li在IE中底部3像素的BUG（增加浮动解决问题）
今天开发项目中碰到一个li在IE中的BUG,先来看设计原型(如图:) 两个红色中间是<li>1px的底边框: 我写的代码如下: ============================== ...
- 【IE6的疯狂之三】IE6 3像素BUG的实例
问题:2列布局.左列固定,右列液态我需要做一个布局.2列,左边列固定宽度.右边列使用剩余宽度.整体宽度不固定,这样不管在17 还是19的屏幕上,左边列始终宽度不变,右边列宽度始终占据剩余宽度.但是我写 ...
随机推荐
- HttpMessageHandler管道[上篇]
HttpMessageHandler管道[上篇] 整个ASP.NET Web API服务端框架采用管道式设计,这个用于“处理请求.响应回复”的管道本质上就是一组HttpMessageHandler的有 ...
- Android 手机进入不了fastboot模式的解决方案
本方案仅针对linux terminal下刷手机img文件的情况: fastboot的通常流程如下: adb reboot bootloader //进入bootloader 模式 fastb ...
- squid和varnish的小结
squid和varnish的小结 http://blog.haohtml.com/ 上周初步接触linux下的这2个反向缓存软件,都实验了一下,貌似squid还是比较顺利的,varnish则碰 ...
- HTML如何转XTML
ob_start(); $html = curl_init('http://www.beijing.gov.cn/'); curl_exec($html); $html = iconv('GBK',' ...
- 常用PHP正则表达式
获取所有图片网址preg_match_all(“/ src=(\”|\’){0,}(http:\/\/(.+?))(\”|\’|\s|>)/is”,$text,$img); 匹配中文字符的正则表 ...
- Servlet部署描述文件（web.xml）
最近看了下配置文件(Deployment Descriptor:简称DD),又称部署描述文件,下面详细介绍下该文件的组成和作用: 一.<web-app>有四个属性: 1.xmlns:申明了 ...
- Jmeter对基于websocket协议的压力测试
WebSocket protocol 是HTML5一种新的协议.它实现了浏览器与服务器全双工通信(full-duplex). 浏览器和服务器只需要要做一个握手的动作,然后,浏览器和服务器之间就 ...
- JavaScript ：memory leak [转]
Memory leak patterns in JavaScript Handling circular references in JavaScript applications Abhijeet ...
- make -j 多核并行编译 导致笔记本过热 自动关机保护
中午在装着CentOS的笔记本上把 Oneinstack 跑起来然后去上班了,本来等着下班回来用的,回来之后发现是关机状态,环境也没有装好. 查看日志,找不到相关信息,甚至还以为是被入侵了.又试了几遍 ...
- Unity中的Mathf类
Mathf.Abs绝对值 计算并返回指定参数 f 绝对值. Mathf.Acos反余弦 static function Acos (f : float) : float 以弧度为单位计算并返回参数 f ...