IE6 "经典"内容重复 bug

本人这次遇到的即非 IE6 对注释理解有误造成,也非 from 中的 input 框没有用 div 包起来造成,
更不是 CSS 复杂浮动元素导致,大半的时间,换来的答案是: div 的结构引起的.
下面是代码:

<!-- section 1 -->
<div class="ads_column">
3     <div id="inter">some code for internal.</div>
4     <div id="exter">some code for external.</div>
</div>

<!-- section 2 -->                                                                                                                                
<div class="ads_column"
9     <div id="inter">some code for internal.</div>
10 </div>
11 <div class="ads_column"
12     <div id="exter">some code for external.</div>
13 </div>


拥有 id 的 div 是 JS 要修改内容的容器, IE 6 却无法正确理解 section 2 的文档结构,会将 class 为
ads_column 容器中的最后一个元素复制一份,从而导致整个区块错乱,惨不忍睹.
起先为了图省事,采用第二种结构形式,结果为之触发 IE6 所谓的"经典" bug.
注: 仅 IE6 发现了这个令人费解的 bug.

附上相关的内容:

IE6内容复制bug的修正方法

IE6内容复制bug的修正方法[点击放大]
前些天,有位初学CSS的朋友问起我一个关于IE6 CSS的问题,据他描述,用IE6预览页面时经常在
div区域外看到div区域内的文本内容,好像文本又被复制了一遍一样。其实,这个问题在我刚学CSS
的时候也曾经遇到过,所以特意写一篇文章提醒其他同学。


bug名称:


这个问题是IE6的bug,俗称IE6注释bug,也叫做浮动容器的字符复制bug。

形成原因:


它的形成原因是几个相连的浮动容器中间插入一段html注释代码,就会将最后一个容器中的最后
几个字符复制到容器之外显示出来,不过这个bug只存在于IE6中,IE7及以上版本和Firefox等浏览器
不存在此bug。

下面以一段代码举例:

<style type="text/css">
div {
width:100%;
float:left;
}
</style>
<div>段落文字</div>
<div>段落文字</div>
<div>段落文字</div><!--引出bug的黑手-->
<div>段落文字</div>
<div>段落文字</div>


将这段代码复制到网页中,然后用IE6预览,在第五行文字的下边就会多出来一个文字,如图一中所示,
而用其它浏览器的预览效果则如图二所示。

解决方法:


其实这个bug的解决方法十分简单,那就是——去掉注释,或者将注释添加到最后一个元素后就可以了。

+++++++++++++++++++++++++++++++++++++++++++++++++++++++

ie6 bug 内容重复

页面截图:
问题代码:
< div >
< form  name ="SelectProduct"  action ="sp_list.asp"  method ="post" >
< input  type ="hidden"  name ="TypeId"  id ="TypeId"  value ="<%=TypeId%>"    />
< div  class ="right" >
..

  原因:type=hidden的input造成文字溢出的问题
解决方法:不要把这个input直接放在form下面,可以用div将其包裹:

< form  name ="SelectProduct"  action ="sp_list.asp"  method ="post" >  
< div  class ="right" >
< input  type ="hidden"  name ="TypeId"  id ="TypeId"  value ="<%=TypeId%>"    />
< div  class ="spsx" >

       打完收工

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

修正IE6重复文字bug

复杂的布局可以触发在浮动元素的最后一些字符可能出现在出现在清除元素下面的bug。
这里有几个解决方法,有些是完美的,但是做一些反复试验也是必须的:

# 确保所有的元素使用”display:inline;”
# 在最后一个元素上使用一个”margin-right:-3px;”
# 为浮动元素的最后一个条目使用一个条件注释,比如:

<!--[if !IE]>Put your commentary in here...<![endif]-->

#在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。)

访问 positioniseverything.net查看该问题的完整介绍。

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

ie6 重复 BUG 问题,简单解决方法!


今天改博客底部图片连接,重复这个问题又出来了,是清除,还是加宽度,高度都白费,也无多余注释代码.
反正就是个重复,文字换成图片到不重复了.但 图片变到了重复文字的位置,找一办天解决方法,
感觉这招还是挺简单实用,反正总是最后一条重复,就在最后在加一条隐藏层,就算是重复哈哈,
也是隐藏的.浪 费快一小时间,就弄这个破问题了.还好算是解决了.

代码:
如果是LI 那就在最后在插条<li style="display:none;">hidden</li>
如果是div那就在插<div style="display:none;">hidden</div>
其它标签一样未测式.估计同样方法也差不多.

1 不同浏览器对浮动float和相邻不浮动对象的解析不同 IE会让相邻的也浮动起来,Chrome 和FF不会,他们的float对象不再占据空间,所以显示效果也不同。 Chrome 下 IE <style> body{ padding:0; margin:0;} #yi{ background:#0033FF; height:298px; width:298px; padding:1px; } #er{ background:#FF0000; width:30px; height:30px; float:left; } #er2{ background:#00FF00; width:30px; height:30px; float:left; } #san{ background:#00FFFF; width:230px; height:90px; border:1px #00FFFF solid;} </style> </head> <body> </body> </html> --------------------------------------------------------------------------------------------- 1.关于background的背景图片 的 fixed固定定位 Firefox是支持background:fixed;定位的,IE6只能说是半支持,好吧,这么说吧,可能不太严谨,就是背景图片固定的效果似乎只在根结点起作用。举个很简单的例子: 先看这段css代码: body{background:url(../image/404.png) no-repeat fixed center center;} div{height:2000px;} HTML部分为: <body><div></body> 其结果是无论IE6还是火狐浏览器下,背景图片都是固定的死死的,不错。但是,一旦html标签带着background属性参合进来,事情就要发生转变了。问题代码: html{background:white;} body{background:url(../image/404.png) no-repeat fixed center center;} div{height:2000px;} 结果IE6下,背景不固定了,只看到背景图片随着滚动条上下移动而移动。演示页面 要解决这个问题呢,也是有办法的,就是将fixed属性转移到html标签上就可以了。即: html{background:white url(../image/404.png) no-repeat fixed center center;} div{height:2000px;} 就可以了。 2.关于height:100%; 要想高度百分比起作用,一般来说,要满足两个条件:其一,父标签有高度可寻,就是向上遍历父标签要找到一个定值高度(body,html另外讨论),如果中途有个height为auto或是没有设置height属性,则高度百分比不起作用;其二,标签本身的属性,如果inline属性的标签
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值