本人这次遇到的即非 IE6 对注释理解有误造成,也非 from 中的 input 框没有用 div 包起来造成,
更不是 CSS 复杂浮动元素导致,大半的时间,换来的答案是: div 的结构引起的.
下面是代码:
拥有 id 的 div 是 JS 要修改内容的容器, IE 6 却无法正确理解 section 2 的文档结构,会将 class 为
起先为了图省事,采用第二种结构形式,结果为之触发 IE6 所谓的"经典" bug.
注: 仅 IE6 发现了这个令人费解的 bug.
附上相关的内容:
+++++++++++++++++++++++++++++++++++++++++++++++++++++++
问题代码:
这里有几个解决方法,有些是完美的,但是做一些反复试验也是必须的:
# 确保所有的元素使用”display:inline;”
# 在最后一个元素上使用一个”margin-right:-3px;”
# 为浮动元素的最后一个条目使用一个条件注释,比如:
<!--[if !IE]>Put your commentary in here...<![endif]-->
#在容器的最后元素使用一个空的div(它也有必要设置宽度为90%或类似宽度。)
访问 positioniseverything.net查看该问题的完整介绍。
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
更不是 CSS 复杂浮动元素导致,大半的时间,换来的答案是: div 的结构引起的.
下面是代码:
1 <!-- section 1 -->
2 <div class="ads_column">
3 <div id="inter">some code for internal.</div>
4 <div id="exter">some code for external.</div>
5 </div>
6
7 <!-- section 2 -->
8 <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的修正方法
前些天,有位初学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" >
..
< 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" >
< 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>
其它标签一样未测式.估计同样方法也差不多.