IE6的3像素BUG产生条件及解决方法

最新推荐文章于 2024-09-20 18:13:10 发布
最新推荐文章于 2024-09-20 18:13:10 发布
阅读量715 收藏 1
点赞数
分类专栏： IE BUG 文章标签： ie 浏览器 xhtml float html css
作者：KwooJan

原文地址：http://www.w3cfuns.com/forum.php?mod=viewthread&tid=263


今天“W3Cfuns2群”上有朋友遇到页面无法兼容多种浏览器，代码发给我后，发现原因在于IE6的3像素BUG，我将这个问题进行重现出来，仔细给大家讲一下，先看一下下面的代码：


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>IE6的3像素bug - CSS学习网(www.cssxuexi.cn)</title>
  6. <style type="text/css">
  7. #sideBar{
  8. width:100px;
  9. height:100px;
  10. background:#6bee68;
  11. float:left;
  12. }
  13. #content{
  14. width:200px;
  15. height:100px;
  16. background:#56bcf3;
  17. }
  18. </style>
  19. </head>

  21. <body>
  22. <div id="sideBar">sideBar</div>
  23. <div id="content">content</div>
  24. </body>
  25. </html>






在不同的浏览器下效果如下图：

IE6的3像素BUG 

可以看到，微软出的三款浏览器IE6、IE7、IE8效果均不同，而IE8和FF的效果确实一样的，尽管效果相同但是不是我们想要的效果，真正的效果是像IE7显示的效果。

    这下好了，标准浏览器FF居然不是我们想要的效果，而IE的三款浏览器每个效果都不一样，IE6吧sideBar和content中间居然还有一个3像素(px)的间隙，值得庆幸的是IE7还能给一个我们想要的效果。

对于IE6显示的效果和我们要求的效果很接近但是有个3像素bug，产生原因呢，就是IE6本身的问题了
    对于IE8和FF的效果和我们要的效果大相径庭，蓝色的跑到绿色的下面，产生原因呢，是因为他们按照W3C页面标准进行解析，浏览器没有错，既然浏览器没有错，那么就错在我们自己----代码编写者身上了，因为我们对浮动没有理解透彻，写出来的代码没有完全符合标准，因为当一个元素浮动的时候就会脱离原本的文本流，而后面的元素就会忽视它的存在，于是在标准浏览器内它们就发生了发生重叠。
    解决方法：只需要给蓝色区域也加上左侧浮动，就OK了，代码如下



  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>IE6的3像素bug - CSS学习网(www.cssxuexi.cn)</title>
  6. <style type="text/css">
  7. #sideBar{
  8. width:100px;
  9. height:100px;
  10. background:#6bee68;
  11. float:left;
  12. }
  13. #content{
  14. width:200px;
  15. height:100px;
  16. background:#56bcf3;
  17. float:left;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22.     <div id="sideBar">sideBar</div>
  23.     <div id="content">content</div>
  24. </body>
  25. </html>
现在再看一下效果，怎么样？都一样了吧
IE6的3像素BUG 

pengju_guo
关注
专栏目录
解决 IE6 3像素Bug
dieya9669的博客
10-04 89
当浮动元素与非浮动元素相邻时，这个3像素的Bug就会出现，它会偏移3像素。 只要触发IE的hasLayout，非浮动元素就会拥有布局。所以，利用IE6特有的hack规则，为它单独写样式就可修复此问题： _zoom:1; margin-left: value; _margin-left: value-3px; zoom 是IE触发Layout条件之一，因为它是IE特有的CSS...
IE6浏览器的bug问题及相关解决的方法
吃瓜群众的博客
10-11 2909
IE6浏览器的bug问题及相关解决的方法 1、css浮动边距加倍错误（双倍边距BUG）的解决办法   该错误只影响ie而不影响其他浏览器，我们可以考虑用hack来解决！！！   解决方法：_display:inline;  2、扩展框问题  原因：无法将内容放入固定宽度或固定高度的框中，则框会扩展以适应内容，而不是让内容溢出框外。解决方法：overflow: hidden 3、png图片
几种解决IE6 Bug的方法
一只胖胖胖miao
10-08 214
解决双边距问题，是使用float引起的 解决方法：使用display:inline 3像素问题 ，是使用float引起的 解决方法：使用_margin-right:3px 超链接hover伪类样式，单击后失效 解决方法：使用正确的书写顺序 ：L->V->H->A (link,visited,hover,active) z-index问题 解决方法：给父级元素添加positi...
IE6的3像素bug解决方法
iteye_20411的博客
06-26 151
3像素bug是IE6的一个著名的bug，当浮动元素与非浮动元素相邻时，这个3像素的Bug就会出现。看下面这个左列浮动，右列不浮动的例子，css代码如下： #side { float: left; background:#99FF99; height: 300px; width: 120px;} #main { background: #99FFFF; height: 300px;}   ...
解决IE 3像素bug
qq_44190791的博客
02-21 131
IE 3像素bug问题 相邻的两个元素，一个设置为浮动的，另一个不设置， 那么在IE5/6下会产生3像素的bug，IE7中两个元素会挨在一起， 在IE8+、chrome、FF浏览器中只会显示浮动元素，除非第二个 也设置为浮动，才会使得两个元素挨在一起。 解决措施：设置相邻的两个元素均浮动。 ...
真正解决ie6的3像素bug
懒蜗牛
09-20 196
ie6的 3像素bug: 经测试需给浮动的div 的_margin-left/right:value-3px;可解决问题而网上流传的给非浮动div 设置_margin-left/right:value-3px;或者设置_zoom:1经测试无效。  ...
IE6 BUG的解决方法
summergreenhtml的博客
09-16 424
1、终极方法：条件注释缺点是在IE浏览器下可能会增加额外的HTTP请求数。2、CSS选择器区分IE6不支持子选择器；先针对IE6使用常规申明CSS选择器，然后再用子选择器针对IE7+及其他浏览器。/* IE6 专用 */.content {color:red;}/* 其他浏览器 */div>p .content {color:blue;} –>3、PNG半透明图片的问题虽然可以通过JS等方式解决，但
写出几种IE6的解决方法
qq_32367397的博客
09-05 273
1.双边距BUG float引起的 使用display2.3像素问题 使用float引起的 使用dislpay:inline -3px3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active4.Ie z-index问题 给父级添加position:relative5.Png 透明 使用js代码 改6.Min-height 最小高度 ！Importan
修复 IE 的文本3像素偏移Bug
歪脖先生的博客
02-25 397
文本3像素偏移Bug在IE6及更低版本中，当一个浮动元素与一个非浮动元素相邻时，在非浮动元素中，会莫名的为靠近浮动元素的内容添加 3 像素的间隙。假设在一个容器中，有两个元素：&lt;div id="wrapper"&gt;    &lt;div class="fl"&gt;float&lt;/div&gt;    &lt;p&gt;...&lt;/p&gt;&lt;/div&am
解决ie6下3像素bug问题
09-25
标题“解决ie6下3像素bug问题”指的是在IE6浏览器版本下，两个浮动元素之间出现的不期望的3像素间隙问题。这个问题是一个常见的前端bug，主要是在IE6浏览器中由于其解析CSS的特殊性导致的，而这种问题在其他浏览器中...
解决IE6 3像素Bug的css写法
10-30
使用这种方法，我们可以在不改变元素原有布局的前提下，有效地解决IE6的3像素Bug。但是，需要注意的是，这种方法只对IE6有效，对于更高版本的IE（如IE7、IE8）以及其他浏览器无效。随着现代浏览器的普及，IE6的使用...
IE6的3像素 bug解决方案分享
09-25
在互联网技术日新月异的今天，老旧的浏览器版本往往会带来许多兼容性问题，而其中IE6的3像素bug就是前端开发者们挥之不去的噩梦。这个bug源于Internet Explorer 6 (IE6)的一个渲染错误，使得在特定布局条件下，文字...
XHTML学习
大河之犬的博客
09-20 221
XHTML是一个严格遵循 XML语法规则的 HTML 标准。它是 HTML4 的一种重构版本，结合了 HTML 的灵活性和 XML 的严格性，如今XHTML已经得到了所有主流浏览器的支持文档结构XHTML DOCTYPE 是强制性的中的 XML namespace 属性是强制性的、、 以及 也是强制性的元素语法XHTML 元素必须正确嵌套XHTML 元素必须始终关闭XHTML 元素必须小写XHTML 文档必须有一个根元素。
MFC获取网页的html文本
bcbobo21cn的专栏
09-19 146
MFC CHttpFile类提供请求和读取 HTTP 服务器上文件的功能；
intellij-idea创建html项目
weixin_45710581的博客
09-17 1173
你可以根据自己的喜好和需求自定义IDEA的工作区，包括颜色主题、字体大小、快捷键等。
【HTML样式】加载动画专题 每周更新
最新发布
m0_73918768的博客
09-20 676
方块移动加载动画 电子风变脸 正方体组合 跳跃式加载动画 下一篇文章应该是Linux安装Java和Maven的脚本 如果想看的可以点个关注~
在HTML中添加图片
Q18600000000的博客
09-15 438
标签中指定要显示的图像
左键选择v-html绑定的文本内容，松开鼠标后出现复制弹窗
y1059477028的博客
09-20 317
【代码】左键选择v-html绑定的文本内容，松开鼠标后出现复制弹窗。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值