IE6 Peekaboo(躲躲猫) BugPeekaboo本意就是“躲躲猫”游戏(捉迷藏),这个BUG也是这样,让你的页面内容时隐时现。 关于这个BUG的原文在这里:http://www.positioniseverything.net/explorer/peekaboo.html里面使用了很多辅助元素来形象的说明和演示这个BUG,如果你英文不是很好或者其他原因,你可以看下面的讲解。在一个div#box里面放置一个浮动的div#float(例如:里面的内容是2行文字)和一个没有任何 CSS样式的div#content(例如:里面的内容是1行文字),然后在它们的下面放置一个div#clear(例如:里面的内容是1行文字)。演示html代码:

运行代码无着色模式复制打印?

  1. <style type="text/css">
  2. #box {background: #eee;}
  3. #float {float : left;}
  4. #clear {clear: both;}
  5. </style>
  6. <div id="box">
  7. <div id="float">左边漂浮的任意内容<br />这是为了比右边的内容高一点</div>
  8. <div id="content">任意输入的内容</div>
  9. <div id="clear">下面清除的标签</div>
  10. </div>

<style type="text/css"> #box {background: #eee;} #float {float : left;} #clear {clear: both;}</style> <div id="box"> <div id="float">左边漂浮的任意内容<br />这是为了比右边的内容高一点</div> <div id="content">任意输入的内容</div> <div id="clear">下面清除的标签</div> </div>这样的话在IE7及其它标准浏览器浏览是没有问题的,分别显示出这3块文字内容,但是在IE下浏览时就只显示出了div#float、div#clear里面的内容(演示),div#content就莫明奇妙的消失了,在哪里?你把鼠标放在应该显示的地方划一划,就出现了本该出现的内容。也就是在变化背景的时候它就会出现,你也可以在div#clear下面放置很长很长的内容,也就是使浏览器出现滚动条,你向下拖动滚动条再拖回来,它一样也出现了,这样就明白了它为什么叫Peekaboo!修复Peekaboo Bug几种方法:● 不要在div#box里面使用背景,或者保持div#clear和div#float在一起。● 给div#box一个明确的“宽度”或“高度” 。#box { height: 100%; /* kill peekaboo bug in IE */}● 把div#box和div#float的定位类型都设置为“相对”。

IE6 Peekaboo(躲躲猫) Bug相关推荐

  1. IE6躲躲猫bug -IE6 Peekaboo Bug

    IE6 Peekaboo Bug The setup: A liquid box has a float inside, and content that appears along side tha ...

  2. 躲猫猫正式上线“Peek-a-Boo”就是“躲猫猫”

    www.peek-a-boo.cn 英文躲猫猫 "Peek-a-Boo"就是"躲猫猫"Peek-a-boo是大人把脸一隐一现来逗小孩发笑的游戏,中文叫做'躲躲猫 ...

  3. [css] 写出你遇到过IE6/7/8/9的BUG及解决方法

    [css] 写出你遇到过IE6/7/8/9的BUG及解决方法 把以前兼容IE6.7学习的东西搬出来了,还以为不见了.兼容性问题 1.IE6margin双边距问题 2.IE67 li间隙问题 3.图片间 ...

  4. ie6,ie7,ie8,ie9 css bug兼容解决记录

    select {background-color:red\0; /* ie 8/9*/background-color:blue\9\0; /* ie 9*/*background-color:#dd ...

  5. IE6不支持min-heigt的bug解决的办法

    今天工作重构页面发现有个关于实现最小高度的问题.用min-height可以解决标准的浏览器的最小高度问题,但是利用ie6不识别!important的bug,而其他浏览器可以识别.我们可以把容器设为.b ...

  6. IE6 的 hover 伪类 bug

    如下代码: Code  1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  7. [转]ie6下CSS存在的BUG

    A 双倍MARGIN 設置float的位于行首的元素[如div, ul中的li等],使用margin后,横向margin值会加倍 div { float:left; margin-left:10px; ...

  8. IE6的3像素神奇bug:缘起与解决方案

    在我们这样一个神奇的国度,到了2014年了,居然还是有很多人的电脑上用着XP,安装的是IE6,他们没有想过要升级,我们就得想着兼容他们.... 一. 6爷我喝高了,最后一行有重影.那什么是IE6 的3 ...

  9. 关于Iframe在IE6下不显示的bug

    IE都出到IE8了,用IE6的人渐渐少了..但还是存在的.例如QAMM们在用. 所以,IE6下存在的问题也必须解决.这两天,我就遇到一个了: html<table><tr>&l ...

最新文章

  1. php 创建文件编码,php fopen创建utf8编码文件例子
  2. ScrollView的基本用法丶代理方法
  3. win7 win10下80端口被System进程占用的解决方法
  4. pybind11回调函数返回指针
  5. IntelliJ IDEA 快捷键(一)(window版)
  6. excel导航窗格_Excel小技巧16:在每天的某个时刻自动打开特定工作簿
  7. GAN之再进化:分布判别器,大连理工提出一种新式无监督图像合成方法
  8. libtorrent实现bt客户端程序
  9. ZigBee单播通信
  10. 计算机蓝屏代码0x000000ED,XP系统蓝屏提示错误代码0x000000ED怎么办?
  11. 怎么用云服务器搭建游戏,搭建游戏用什么云服务器
  12. RTX3080Ti和RTX2080Ti性能差距 RTX3080Ti和RTX2080Ti参数对比哪个好
  13. 稿定设计怎么去除水印?
  14. QQ浏览器怎样选择IE8兼容模式
  15. 15-VulnHub-Raven 1
  16. Tracer 记录 Controller 日志
  17. E1000 与 VMXNET3的 区别
  18. 题解报告:hdu 1846 Brave Game(巴什博弈)
  19. elasticsearch 安装的坑
  20. kb2919442不适用计算机,Windows运维之Windows8.1-KB2999226-x64安装提示 此更新不适用你的计算机...

热门文章

  1. 浅谈sklearn中DBSCAN的欧式距离(Euclidean Distance)的计算
  2. Python入门(二)-编程环境
  3. Mathematica绘制动态椭圆摆线(一)
  4. 使用latex撰写Elsevier双栏论文,表格标题caption左对齐问题
  5. 模板编码方法(template method)
  6. JWT、OOS、Oauth三种登录验证机制
  7. 天池大数据比赛-菜鸟仓库比赛-第一赛季记录
  8. 摸鱼儿·雁丘词 / 迈陂塘
  9. 微信抢票——迭代周期一结束后感想
  10. 多WLAN口路由器原理分析