HTML-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;属性（本人这次碰到的问题就是用的这个方法在p标签上加了position属性）
引发这种BUG有几个条件
1.是注释引起的,删除所有注释即可.
2.hidden的input直接放在form下.
3.display为none的div也有可能引发此bug.（本人这次碰到的情况！并不是注释引起的）在IE6中，一些隐藏的元素（如注释、display:none;的元素）被包含在一个浮动元素里，就有可能引发文本重复bug。解决办法：给浮动元素添加display:inline;。
2,3可以通过外面再包一次DIV解决
参考下文:转自http://blog.jobbole.com/47676/
HTML代码：
<div>
<p>
<span>A</span>
<span>B</span>
<span>C</span>
</p>
</div>
CSS代码：
div {
width: 100px;
}
p {
margin-right: 1px;
}
span {
float: left;
width: 120px;
}
设置如下：演示中有一个div元素，有明确的width设置，在这个div中，有一个元素P——此元素有margin-right属性且该值不为0（在IE6中margin不是必需的），且在该P元素内部有三个浮动的子元素，且这三个子元素的width值比外层元素div的width大。我们来看一下在受影响的浏览器中出现了什么情况：最后一个字符“C”——被复制并重新显示在下一行。我已经强调过这里是有三个浮动元素，目前情况就是：如果有少于三个的浮动元素，此bug不会发生，而如果浮动元素数目多于三个，连续浮动元素bug就出现了。
解决方案
下面是针对此bug的解决方案
解决日期
2009 8.18 11:32:52 星期二
修复版本
所有受影响的IE
描述
注意：此方案也适用于针对浮动元素bug的CS解决方案
我们要用IE的bug修复利器去修正该bug。不！我不是在说“layout”,虽然可以通过设置P元素的layout以便IE7下修正该bug(IE6不适用)。来看看现在的页面：
修正后的页面：在单独的页面打开
HTML代码：
<div>
<p>
<span>A</span>
<span>B</span>
<span>C</span>
</p>
</div>
CSS代码：
div {
width: 100px;
}
p {
margin-right: 1px;
}
span {
float: left;
width: 120px;
position: relative; /*主要是这行！！*/
}
唯一的区别是：我们在浮动元素span上加了position:relative这个属性，字符C就不会再IE6和IE7中出现”复制”的现象了。
HTML-IE6复制BUG的更多相关文章
- IE6兼容性问题及IE6常见bug详细汇总
转载地址:http://www.jb51.net/css/76894.html 1.IE6怪异解析之padding与border算入宽高 原因:未加文档声明造成非盒模型解析 解决方法:加入文档声明&l ...
- IE6常见bug整理
By Diaoyude | 发布时间: 09-08 09:47 | Hits:1,253 | Post in: WEB前端 , Div-Css 针对IE6常见的一些ie6bug,ie6png,E6 ...
- IE6兼容性问题及IE6常见bug详细汇总－－－转载
1.IE6怪异解析之padding与border算入宽高 原因:未加文档声明造成非盒模型解析 解决方法:加入文档声明<!doctype html> 2.IE6在块元素.左右浮动.设定mar ...
- HTML-IE6兼容性问题及IE6常见BUG详细汇总
点评:IE6的兼容性问题一直都是前端工程师的恶梦,为了早早脱离这种困境,本文整理了一些相关兼容性的知识,感兴趣的朋友可以参考下哈,希望可以帮助到你- 1.终极方法:条件注释 <!--[if lt ...
- IE6的bug
借鉴http://css.doyoe.com/ 问题和经验列表,里面应有尽有.写几个常见的: 1.解决IE6及更早浏览器浮动时产生双倍边距的BUG display:inline 2.如何解决IE6下的 ...
- IE6常见bug
1.IE6怪异解析之padding与border算入宽高 原因:未加文档声明造成非盒模型解析 解决方法:加入文档声明<!doctype html> 2.IE6在块元素.左右浮动.设定mar ...
- 前端之旅HTML与CSS篇之IE6常见BUG
1.IE6怪异解析之padding与border算入宽高原因:未加文档声明造成非盒模型解析解决方法:加入文档声明<!doctype html> 2.IE6在块元素.左右浮动.设定marin ...
- IE6基本bug
一.IE6双倍边距bug当页面上的元素使用float浮动时,不管是向左还是向右浮动:只要该元素带有margin像素都会使该值乘以2,例如“margin-left:10px” 在IE6中,该值就会被解析 ...
- ie6/7 bug大全
1. ie6/7下ul高度变高 li 加 vertical-align:bottom; 2.ie6不支持min-height a:height:auto !important; height:10 ...
随机推荐
- Apache服务器和tomcat服务器有什么区别？
Apache与Tomcat都是Apache开源组织开发的用于处理HTTP服务的项目,两者都是免费的,都可以做为独立的 Web服务器运行.Apache是Web服务器而Tomcat是Java应用服务器. ...
- 关于npm run build 卡住不动的坑。。。
起因:最近开发个项目使用的vue,有些功能需要生产版本放服务器上测试,这就出问题了..卡住了,不动了,还不报错 这是在vscode的终端里面,试了git hash,试了cmd , 试了powershe ...
- WPF支持GIF的各种方法
2012.12.18更新:修复下载链接 已知WPF的Image元素只能显示GIF图片的第一帧,而MediaElement不能加载作为资源或内嵌的资源的GIF图片,所以网上有几种实现方法. 我抄袭网上提 ...
- 传输层TCPUDP 具体解释
1.传输层存在的必要性 因为网络层的分组传输是不可靠的,无法了解数据到达终点的时间,无法了解数据未达终点的状态.因此有必要增强网络层提供服务的服务质量. 2.引入传输层的原因 面向连接的传输服务与面向 ...
- Curvilinear structure detections
此部分参考处 As a structure-based detector, PCBR does not use edges, instead, it uses curvilinear structur ...
- ArcGIS for Android地图上实际距离与对应的屏幕像素值计算
本篇文章主要介绍了"ArcGIS for Android地图上实际距离与对应的屏幕像素值计算",主要涉及到ArcGIS for Android地图上实际距离与对应的屏幕像素值计算方 ...
- 支持向量机通俗导论（理解SVM的三层境界） by v_JULY_v
支持向量机通俗导论(理解SVM的三层境界) 前言 动笔写这个支持向量机(support vector machine)是费了不少劲和困难的,原因很简单,一者这个东西本身就并不好懂,要深入学习和研究下去 ...
- CSS3 Media Queries 详细介绍与使用方法[转]
Media Queries 就是要在支援CSS3 的浏览器中才能正常工作,IE8 以下不支援. 而Media Queries 的套用方法千变万化,要套用在什么样的装置中,都可以自己来定义. 关于Med ...
- cocos2d-x游戏开发 跑酷(八) 对象管理 碰撞检測
对象管理类的原理是这种: ObjectManager类是一个单例类,全局仅仅有一个对象实例存在.初始化的时候创建两个数组CCArray来保存金币和岩石.为什么要保存,由于在地图重载的时候.要销毁看不见 ...
- Python socket – network programming tutorial
原文:https://www.binarytides.com/python-socket-programming-tutorial/ --------------------------------- ...