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

最新推荐文章于 2024-09-16 23:05:35 发布
最新推荐文章于 2024-09-16 23:05:35 发布
阅读量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问题
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
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;}   ...
IE6的3像素 bug解决方案分享
09-25
在互联网技术日新月异的今天，老旧的浏览器版本往往会带来许多兼容性问题，而其中IE6的3像素bug就是前端开发者们挥之不去的噩梦。这个bug源于Internet Explorer 6 (IE6)的一个渲染错误，使得在特定布局条件下，文字...
XHTML简介
qq_48501521的博客
09-11 984
XHTML 指的是可扩展超文本标记语言XHTML 与 HTML 4.01 几乎是相同的XHTML 是更严格更纯净的 HTML 版本XHTML 是以 XML 应用的方式定义的 HTMLXHTML 是 2001 年 1 月发布的 W3C 推荐标准XHTML 得到所有主流浏览器的支持。
前端用html写excel文件直接打开
全易
09-10 762
html文件直接用excel打开
HTML 揭秘：HTML 编码快速入门
m0_53117341的博客
09-09 1341
HTML 揭秘：HTML 编码快速入门一 . 前端知识介绍二 . HTML 介绍三 . HTML 快速入门四 . HTML 编辑器 - VSCode4.1 插件安装4.2 修改主题配色4.3 修改快捷键4.4 设置自动保存4.5 创建 HTML 文件4.5 书写 HTML 代码4.6 常见快捷键五 . 基础标签5.1 字体标签5.1.1 color 属性5.1.2 size 属性5.1.3 face 属性5.2 i 标签、b 标签5.3 hr 标签5.4 br 标签5.5 center 标签5.6 练习5.
HTML、CSS实现树状图
p_s_p的博客
09-09 686
【代码】HTML、CSS实现树状图。
【HTML】Html标签
千里之行，始于足下
09-12 1150
文本标签、表格标签、表单标签、列表标签、媒体标签、特殊字符、转义字符
使用HTML和CSS制作网页的全面指南
weidl001的博客
09-14 1185
HTML（超文本标记语言）是构建网页的基础语言。它用于定义网页的结构和内容。通过使用不同的标签（tags），我们可以告诉浏览器如何显示文本、图像、链接等。CSS（层叠样式表）用于控制网页的外观和布局。它可以设置文本的颜色、字体、背景、边距等，使网页更加美观和用户友好。通过以上步骤，我们已经了解了如何使用HTML和CSS创建一个简单但完整的网页。主题要点HTML基础了解HTML的结构和常用标签CSS基础理解CSS的语法、选择器和常用属性网页制作步骤规划布局 -> 编写HTML -> 添加CSS实践技巧。
reader-lm：小模型 html转markdown
weixin_42357472的博客
09-12 481
输入网址：https://www.galaxy-geely.com/E5。
介绍一些免费 的 html 5模版网站 和配色 网站
最新发布
小 tom的博客
09-16 785
提示：以下是本篇文章正文内容，下面案例可供参考以下是一些提供免费网站模板的网站，适用于各种类型的网站（如个人博客、企业站点、电子商务等）。这些模板通常带有响应式设计，适用于桌面、平板和移动设备。Wix网站：Wix特点：Wix 提供了大量免费的、可自定义的网站模板，涵盖博客、商业、艺术作品集、在线商店等多种类型。使用他们的拖放式编辑器，可以轻松调整布局和风格。适用对象：新手和不熟悉代码的人。TemplateMo网站：TemplateMo。
《实现 HTML 图片轮播效果》
qq_69304031的博客
09-11 889
在网页设计中，轮播效果是非常常见且重要的元素。它可以在有限的空间内展示多张图片或者广告，能够有效地吸引用户的注意力，提高信息展示的效率。常用于网站首页的焦点图展示、商品图片展示等场景。以下是一个简单的 HTML、CSS 和 JavaScript 实现的图片轮播代码示例。
制作炫酷个人网页：用 HTML 和 CSS3 展现你的风格
m0_61118741的博客
09-12 1526
通过使用 HTML 和 CSS3 的新特性，我们成功打造了一个充满动感、炫酷十足的个人网页。你可以根据自己的喜好继续添加更多效果，比如动画按钮、背景视频等。炫酷设计的背后，是 CSS3 强大的功能。如果你希望让网页更加动感和富有层次感，不妨尝试更多 CSS3 的特性，让每个访问你网页的人都能眼前一亮！
【HTML】HTML页面和常见标签
Yeeear的博客
09-12 6410
什么是前端？HTML页面的编写、如何快速生成代码框架、常见标签（注释标签、标题标签、段落标签、换行标签、格式化标签）
IE浏览器CSS问题汇总及解决方案
"本文总结了在Internet Explorer浏览器中遇到的一些常见的CSS问题及其解决方案，包括div的垂直居中问题、margin加倍问题、min-width/height和max-width/height在IE6下的问题、IE6特有的3像素bug以及所谓的'ie6捉迷藏...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值