IE6躲猫猫bug【幽灵文本】
2012-08-23 15:09
253 查看
解决方法:
if($.browser.msie && parseInt($.browser.version) < 7){//ie6的躲猫猫事件
var html = _.template(tpl, {items:obj.ItemArray}) + '<div style="clear:both;font-size:0;height:0;"></div>';
}
else{
var html = _.template(tpl, {items:obj.ItemArray});
}
原文地址:
http://hi.baidu.com/821402834/item/ed609025fa2a04dda417b622
问题重现条件:
1、一个容器包含2两个具有“float”样式的子容器。
2、第二个容器的宽度大于父容器的宽度,或者父容器宽度减去第二个容器宽度的值小于3(注意是小于3,当等于3时不会出现重复文字)。
3、在第二个容器前存在注释
4、多出文字个数与注释的条数有关
多出文字个数=注释条数*2-1
当多出文字个数大于容器中的字数时,多出文字消失
代码:
<div style="width:400px;height:200px;">
<div style="float:left;background:red;"></div>
<!---->
<div style="float:left;width:405px;background:blue;">重复文字测试</div>
</div>
解决方法:
1、不写注释(简单直接有效的方法,但降低了代码可读性)
2、将html注释<!---->换成IE注释<!--[if !IE]>这里是注释内容[endif]-->
或 注释不放置于 2 个浮动的区块之间。
3、在第二个容器后面加一个或者多个<div style="clear"></div>来解决
其中clear 样式:
.clear{clear:both;font-size:0;height:0;}
Clear:both 和 height:0 是必须得写的font-size 可以不写(建议写,因为在ie6中div会有一个默认高度,修复了旧bug但引来了新bug,还得要解决这个IE6默认高度的bug)
针对上面的问题可以这样写
写法一:<div style="clear:both; height:0;"><!----></div>
写法二:<div style="clear:both;height:0;font-size:0;overflow:hidden;"></div>
4、设置div的宽度,针对条件二,只要不让第二个div的宽度大于父容器,或者不让父容器减去第二个容器宽度小于3 ,就可以消除这个bug,但是这样会影响布局
5、将文字区块放在新的容器中(这种解决方法很不错,不需要刻意去修正这个bug)
<div style="float:left;width:405px;background:blue;"><div>重复文字测试</div></div>
<div style="float:left;width:405px;background:blue;"><span>重复文字测试</span></div>
相关文章推荐
- [转载]IE6Bug之躲猫猫【2013/10/29】
- IE6的躲猫猫Bug
- ie6躲猫猫bug
- IE6 躲猫猫BUG的解决方案
- CSS IE6躲猫猫Bug
- IE6 幽灵文本(最后一个字出现莫名重复)
- 【IE6】IE6bug之躲猫猫bug(peek-a-boo)bug
- 关于IE6下Li标签左边多出宽16pxBUG的问题
- IE6下常见的bug 调整页面兼容性
- IE6 浮动元素与非浮动元素在一起,3px偏移BUG解决方案
- IE6尾部重复字符bug , IE6下产生多余字符的BUG
- 【转】IE6下margin双倍边距Bug的处理办法
- IE6下position:absolute的定位BUG(转载)
- 文本溢出显示省略标记'...'的bug
- ie6 浏览器的bug
- IE6环境下遭遇winow.location.href=''的跳转bug
- IE6的3像素BUG
- IE6|IE7中li底部3px间距BUG
- 绝对定位九宫格IE6bug不完整解决方案
- IE6常见bug整理