您的位置：首页 > 其它

IE6的3像素BUG

2011-08-26 16:31 246 查看

IE6的3像素BUG

转自：http://panjunlai.blog.163.com/blog/static/58190301201081492525474/



3像素bug是IE6的一个著名的bug，当浮动元素与非浮动元素相邻时，这个3像素的Bug就会出现。

我们看下面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>IE6的3像素bug - CSS学习网(www.cssxuexi.cn)</title>

<style type="text/css">

#sideBar{

width:100px;

height:100px;

background:#6bee68;

float:left;

}

#content{

width:200px;

height:100px;

background:#56bcf3;

}

</style>

</head>

<body>

<div id="sideBar">sideBar</div>

<div id="content">content</div>

</body>

</html>

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



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

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

对于IE6显示的效果和我们要求的效果很接近但是有个3像素bug，产生原因呢，就是IE6本身的问题了

对于IE8和FF的效果和我们要的效果大相径庭，蓝色的跑到绿色的下面，产生原因呢，是因为他们按照W3C页面标准进行解析，浏览器没有错，既然浏览器没有错，那么就错在我们自己----代码编写者身上了，因为我们对浮动没有理解透彻，写出来的代码没有完全符合标准，因为当一个元素浮动的时候就会脱离原本的文本流，而后面的元素就会忽视它的存在，于是在标准浏览器内它们就发生了发生重叠。

解决方法：只需要给蓝色块也加上左侧浮动。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>IE6的3像素bug - CSS学习网</title>

<style type="text/css">

#sideBar{

width:100px;

height:100px;

background:#6bee68;

float:left;

}

#content{

width:200px;

height:100px;

background:#56bcf3;

float:left;

}

</style>

</head>

<body>

<div id="sideBar">sideBar</div>

<div id="content">content</div>

</body>

</html>

现在再看一下效果，怎么样？都一样了吧



内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航