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>
现在再看一下效果,怎么样?都一样了吧
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>
现在再看一下效果,怎么样?都一样了吧